• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文为原创随笔,纯属个人理解。如有错误,欢迎指出。
如需转载请注明出处

在微信小程序中预览图片分为

  a、预览本地相册中的图片。

  b、预览某个wxml中的多张图片。

分析:实质其实是一样的。都是给wx.previewImage传入参数

wx.previewImage{
  current:\'\'.//打开预览时要显示图片的地址。
  urls:[],//需要预览的图片的地址数组。        
}

 这里拿b、预览某个wxml中的图片列表来讲解bindtap的传值问题。a、预览本地相册。可以结合wx.chooseImage接口来实现,这里就不多说了。

直接上效果吧

 

上代码   

// wxml中的关键代码

 <view class="right imgs" >
       <view class="img" wx:for="{{item.info_file}}" wx:for-item="img" wx:key="img" id="img" bindtap=\'previewImg\' id="img" data-imgs=\'{{item.info_file}}\' data-currentimg="{{img}}">
           <image src="{{server_host}}{{img}}"></image>
       </view>
</view>
// 对应js中bindtap函数的代码

 previewImg: function (event) {
    var that =this;
    console.log(event);
    var imgs= event.currentTarget.dataset.imgs;
    var temp=[];
    for (var index in imgs){
      temp = temp.concat(app.globalData.SERVER_HOST+imgs[index]);
    }
    wx.previewImage({
      current: app.globalData.SERVER_HOST+event.currentTarget.dataset.currentimg,
      urls: temp,
    })
  }

关键解释:

  1. bindtap传值方式:通过data-*的方式传递参数。然后从相应函数的参数event中获取对应的值。此处使用data-imgs传递将要预览的图片的地址数组。则在相应函数中则通过event.currentTarget.dataset.imgs即可获得相应的值。同理data-currentimg。则是通过event.currentTarget.dataset.currentimg获取传入的值。

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序之生命周期发布时间:2022-07-18
下一篇:
为什么小程序能降低商家的推广成本发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap