image.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. Page({
  2. data: {
  3. array: [{
  4. mode: 'scaleToFill',
  5. text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应',
  6. }, {
  7. mode: 'aspectFit',
  8. text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来',
  9. }, {
  10. mode: 'aspectFill',
  11. text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来',
  12. }, {
  13. mode: 'widthFix',
  14. text: 'widthFix:宽度不变,高度自动变化,保持原图宽高比不变',
  15. }, {
  16. mode: 'top',
  17. text: 'top:不缩放图片,只显示图片的顶部区域',
  18. }, {
  19. mode: 'bottom',
  20. text: 'bottom:不缩放图片,只显示图片的底部区域',
  21. }, {
  22. mode: 'center',
  23. text: 'center:不缩放图片,只显示图片的中间区域',
  24. }, {
  25. mode: 'left',
  26. text: 'left:不缩放图片,只显示图片的左边区域',
  27. }, {
  28. mode: 'right',
  29. text: 'right:不缩放图片,只显示图片的右边边区域',
  30. }, {
  31. mode: 'top left',
  32. text: 'top left:不缩放图片,只显示图片的左上边区域',
  33. }, {
  34. mode: 'top right',
  35. text: 'top right:不缩放图片,只显示图片的右上边区域',
  36. }, {
  37. mode: 'bottom left',
  38. text: 'bottom left:不缩放图片,只显示图片的左下边区域',
  39. }, {
  40. mode: 'bottom right',
  41. text: 'bottom right:不缩放图片,只显示图片的右下边区域',
  42. }],
  43. src: 'https://gw.alipayobjects.com/zos/rmsportal/SzbNuEjBhzGWjkeOzCqo.png',
  44. },
  45. imageError(e) {
  46. console.log('image 发生 error 事件,携带值为', e.detail.errMsg);
  47. },
  48. onTap(e) {
  49. console.log('image 发生 tap 事件', e);
  50. },
  51. imageLoad(e) {
  52. console.log('image 加载成功', e);
  53. },
  54. });