微信小程序实现图片预览功能的代码详细介绍

why 28 2024-09-24

图片预览是一个很普遍的功能，本文主要和大家详细介绍了微信小程序实现图片预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

效果图

图片预览效果图

原理

  • 使用wx.chooseImage选择本地图片；

  • 使用wx.previewImage预览图片。

WXML

1

2

3

4

5

6

<view>

 <button bindtap="previewImage" type="primary">图片上传预览</button>

 <view class="tui-content">

  <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" src="{{item}}" src="{{item}}"></image>

 </view>

</view>

WXSS

1

2

3

4

5

page{background-color: #efeff4;}

.tui-preview-img{

 width: 200rpx;

 height: 120rpx;

}

JS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

Page({

 data: {

  previewImageArr:[]

 },

 previewImage(e){

  var self = this;

  wx.chooseImage({

   count:8,

   success(res) {

    var tempFilePaths = res.tempFilePaths;

    self.setData({ previewImageArr: tempFilePaths});

   }

  })

 },

 changePreview(e){

  var self = this;

  wx.previewImage({

   current: e.currentTarget.dataset.src,

   urls: self.data.previewImageArr

  })

 }

})

注意

wx.previewImage的参数current和urls必须是http链接。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 代码 微信小程序 小程序 参数
上一篇:微信小程序开发弹窗页面的方法详细介绍与解读
下一篇:从零开始微信小程序四种页面跳转方法全解析六
相关文章

 发表评论

暂时没有评论，来抢沙发吧~