微信小程序 轮播图展示,图片全屏显示

微信小程序 轮播图展示,图片全屏显示js代码

大家好,欢迎来到IT知识分享网。微信小程序

视图层代码

<swiper>
    <swiper-item wx:for="{
  
  {img}}">
     <!-- data-src传的是展示的那张图片, data-list传的是循环数据 -->
          <image src="{
  
  {item}}" data-src="{
  
  {item}}" data-list="{
  
  {img}}" bindtap="img"></image>
    </swiper-item>
</swiper>

js代码 

  data: {
    img:[
      'https://img0.baidu.com/it/u=2262828731,2849199006&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1668186000&t=5390e7543963ff3eaf0fd4f7e492e613',
      'https://img2.baidu.com/it/u=2526401426,2132302010&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668186000&t=fb08c6a5e1f6600d4b4a70c70790d580',
'https://img0.baidu.com/it/u=1275095085,1961143463&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1668186000&t=7c9b5202dca189d4eb8e64e98ca5462d'
    ]
  },
//绑定的方法
  img(res){
    console.log(res);
    let src=res.currentTarget.dataset.src
    let list= res.currentTarget.dataset.list

    wx.previewImage({
      urls: list,
      current:src
    })
    
  },

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/12674.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信