微信小程序:常用功能5——点击图片,实现图片的预览功能wx.previewImage(Object object, boolean showmenu)

向用户展示图片时,为了展现布局的美观性,往往不同尺寸的图片要放在相同大小的容器中。
但是图片想让用户看清、或者保存时,我们就要进行图片的预览,像用户展示原图。
图片预览接口:wx.previewImage(Object object, boolean showmenu)。在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

首先,我再百度找几张图片放在data里边待用

这里要用数组,因为这个接口的运行方式是在图片列表中显示其中的某一个图片,列表是数组格式。
微信小程序:常用功能5——点击图片,实现图片的预览功能wx.previewImage(Object object, boolean showmenu)

然后,在wxml里边把图片数组遍历显示出来:
<view wx:for="{{pic}}" wx:key="key">
  <image src="{{item}}" style="width:100%;" mode='aspectFill'></image>
</view>

其中,mode="aspectFill"作用是设置三张图片的缩放模式:保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

微信小程序:常用功能5——点击图片,实现图片的预览功能wx.previewImage(Object object, boolean showmenu)

现在我们做点击图片,进行图片预览。

给图片加一个bindtap="see"点击指令。

<view wx:for="{{pic}}" wx:key="key">
  <image src="{{item}}" style="width:100%;" mode='aspectFill' bindtap="see"></image>
</view>

js使用预览图片的接口wx.previewImage(Object object, boolean showmenu):

  see(e){
    console.log(e)
    let indx = e.currentTarget.dataset.index // 找到点击图片的索引位置
    wx.previewImage({
      current: this.data.pic[indx], // 当前显示图片的http链接,将点击图片的索引数指定好
      urls: this.data.pic // 需要预览的图片http链接列表
    })
  },

微信小程序:常用功能5——点击图片,实现图片的预览功能wx.previewImage(Object object, boolean showmenu)
此时就可以进行图片预览了,同时开可以左右滑动切换。有意思:)

我不是专业程序工作者,在这里是把我的小程序设计经验分享给大家。
如果其中有用词不当的地方,请大家留言指正,我们共同学习。
更多设计、功能的学习经验,大家也可以去我的公众号查看!
————
微信小程序:常用功能5——点击图片,实现图片的预览功能wx.previewImage(Object object, boolean showmenu)

上一篇:使用MPLAB开发PIC无法通过编译的问题


下一篇:图像增强—空间滤波器