小程序预览图片wx.previewImage

最新推荐文章于 2021-12-06 13:43:34 发布

weixin_38169886

最新推荐文章于 2021-12-06 13:43:34 发布

阅读量229

点赞数

原文链接：http://www.cnblogs.com/520BigBear/p/11313297.html

版权

本文介绍了一个WeChat小程序中实现头像预览功能的方法，通过使用<image>组件并结合bindtap事件和previewImage方法，可以有效地让用户预览并查看头像图片。代码示例详细展示了如何绑定数据源和调用微信内置的图片预览API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

====》

==》

代码:

<image mode='aspectFill' bindtap='previewImage'  data-src='{{dataList.avatar}}' src="{{dataList.avatar}}"></image>

/**
   * 页面的初始数据
   */
  data: {
    imgUrls:[],//预览用的
    dataList: [],//后台接口返回的数据  暂存区
  },
/**
   * 预览头像
   */
  previewImage(e) {
    const current = e.target.dataset.src
    // console.log(current)
    wx.previewImage({
      current,
      urls: this.data.imgUrls
    })
  },

转载于:https://www.cnblogs.com/520BigBear/p/11313297.html