微信小程序-轮播图（自动轮播、点击图片跳转页面）

先来说明一下我们需要实现的最终效果：轮播图，图片自动切换，也可以通过人为的滑动来进行来回切换，并且当用户点击其中一张图片时，跳转到与其相对应的页面。

思路分析

微信小程序提供swiper组件，swiper是一个滑块视图容器。我们先来了解一下swiper组件的一些属性。

我们通过设置其中的一些属性来实现图片的自动轮播：

autoplay: true, //自动切换
circular: true, //采用衔接滑动

注意：swiper-item 仅可放置在<swiper/>组件中，宽高自动设置为100%。

下面我们直接看代码：

1 .wxml

<view>
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" 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"/>    
        <video src="{{item}}"></video>
     </swiper-item>
    </block>
  </swiper>
</view>

2 .js

Page({
  data: {
    swiperCurrent: 0,//当前所在页面的 index
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //滑动动画时长1s
    circular: true, //是否采用衔接滑动
    imgUrls: [//图片路径(可以是本地路径，也可以是图片链接)
      '../img/lbt/1.jpeg',
      '../img/lbt/2.jpeg',
      '../img/lbt/3.jpeg',
      '../img/lbt/4.jpeg',
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539949312074&di=39722c3c27bda0680e3433b64dd9c7e2&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb7fd5266d016092454b64286de0735fae7cd3498.jpg',
    ],

    links: [//点击图片之后跳转的路径
      '../personal/personal',
      '../personal/personal',
      '../personal/personal',
      '../personal/personal',
      '../personal/personal',
    ] 
  },

  //轮播图的切换事件
  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  },

  //点击指示点切换事件
  chuangEvent: function (e) {
    this.setData({
      swiperCurrent: e.currentTarget.id
    })
  },

  //点击图片触发事件
  swipclick: function (e) {
    console.log(this.data.swiperCurrent);
    wx.switchTab({
      url: this.data.links[this.data.swiperCurrent]
    })
  },
})

3 .wxss

根据自己需求进行样式设置

/* 设置放轮播图的盒子属性 */
swiper {
  width: 100%;
  height: 400rpx;
}

/* 设置轮播图图片属性 */
swiper-item image {
  width: 100%;
  height: 100%;
}