微信点击图片放大

最新推荐文章于 2022-09-12 15:22:38 发布

原创最新推荐文章于 2022-09-12 15:22:38 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #微信小程序 #小程序

小程序专栏收录该内容

2 篇文章

订阅专栏

给父元素加事件 子元素冒泡给父

 <scroll-view scroll-x="true" class="photos-list" bindtap="tapImage">
     

     <view class="photos-item" wx:for="{{movis.thumb}}">
        <image lazy-load  mode="aspectFill"  data-i="{{index}}" src="{{item}}"></image> </view>
     
  </scroll-view>

lazy-load 懒加载 mode="aspectFill"图片不失真

 /** 点击剧照图片，大图预览 */
  tapImage(event){
    let i = event.target.dataset.i // 当前下标
 
//点空白 不触发
    if(i==undefined){ return }
 //图片路径
    let urls = this.data.movie.thumb
//创建新数组
    let newUrls = []
    urls.forEach(url=>{
      newUrls.push(
 //截取字符串  
        url.substring(0, url.lastIndexOf('@')))
    })
    wx.previewImage({ 
      current: newUrls[i],// 当前显示图片的http链接
      urls:newUrls // 需要预览的图片http链接列表
    })
  },