微信小程序---轮播图点击图片预览效果

最新推荐文章于 2023-04-13 19:40:27 发布

半杯水 · 甜

最新推荐文章于 2023-04-13 19:40:27 发布

阅读量710

点赞数

文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/qq_62328748/article/details/126463758

版权

wxml

<swiper class="box" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="ture">
<block wx:for="{{img}}">
<swiper-item bindtap="preview" data-item="{{item}}" class="swiper">
<image src="{{item}}" class="img" />
</swiper-item>
</block>
</swiper>

wxss

Page{
  width: 750rpx;
  overflow-x: hidden;
}
.box {
  height: 400rpx;
  width: 100%;
}
.swiper {
  height: 100%;
  width: 100%;
}
.img{
   height: 100%;
  width: 100%;
}

  data: {
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔
    duration: 800, //滑动动画时长
    circular: true, //是否采用衔接滑动
    img: [
      'https://7475-tu-wu-shi-bie-6g90qgfo841f0c42-1311707808.tcb.qcloud.la/appiontment/1653387902187-429.50950593344396.jpg',
      'https://7475-tu-wu-shi-bie-6g90qgfo841f0c42-1311707808.tcb.qcloud.la/appiontment/1653450962731-727.7160198482304.jpg',
      'https://7475-tu-wu-shi-bie-6g90qgfo841f0c42-1311707808.tcb.qcloud.la/appiontment/1653450962732-620.7720755865738.jpg',
    ],
  },

//预览图片，放大预览
preview(e) {
  console.log(e)
  let item = e.currentTarget.dataset.item
  wx.previewImage({
    current: item, // 当前显示图片的http链接
    urls: this.data.img // 需要预览的图片http链接列表
  })
},