小程序轮播图

最新推荐文章于 2024-07-05 17:59:35 发布

多学学习吧

最新推荐文章于 2024-07-05 17:59:35 发布

阅读量99

点赞数

分类专栏：小程序文章标签：小程序小程序轮播

本文链接：https://blog.csdn.net/weixin_44900317/article/details/103269324

版权

小程序专栏收录该内容

19 篇文章 1 订阅

订阅专栏

wxml代码，使用swiper来制作，swiper 外不要有任何标签，否则无法显示：

  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" indicator-color="{{indicatorCo}}" indicator-active-color="{{indicatoraAC}}" interval="{{interval}}" duration="{{duration}}" circular="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
 
    <block wx:for="{{imgUrls}}" wx:key="unique">
 
      <swiper-item>
 
        <image src="{{item}}" class="img" bindtap="swipclick" mode="aspectFill"/>
 
      </swiper-item>
 
    </block>
 
  </swiper>

js的data中：

    swiperCurrent: 0,

    indicatorDots: true,

    autoplay: true,

    interval: 3000,

    duration: 800,

    circular: true,

    indicatorCo: "#ffdfdc",

    indicatoraAC: "#ff948a",

    imgUrls: [

      '../../images/timg.jpg',

      '../../images/timg (1).jpg',

      '../../images/timg (2).jpg'

    ],

可以为图片加上跳转链接，我这里没有写，给大家看一下点击图片后跳转到链接地址的js：

swipclick: function (e) {

    console.log(this.data.swiperCurrent);

    wx.switchTab({

      url: this.data.links[this.data.swiperCurrent]

    })

  },