微信小程序轮播图要用到swiper组件，即滑块视图容器
wxml代码
<view> <swiper autoplay='true' current="{{swiperCurrent}}" interval='5000' duration='200' bindchange='swiperChange' circular='true' > <!-- autoplay 为布尔值，默认为false，是否自动切换 current 为数字类型，默认为0， 当前所在滑块的 index interval 数字类型，默认为5000，自动切换时间间隔 duration 数字类型，默认500，滑动动画时长 circular 为布尔值，默认为false,是否采用衔接滑动 --> <block wx:for='{{list}}' wx:key='{{list}}'> <swiper-item> <image src='{{item.urlImg}}'></image> </swiper-item> </block> </swiper> <view class='content'> <block wx:for='{{list}}' wx:key='{{list}}'> <image src='{{item.urlImg}}' data-i='{{index}}' bindtap='move' class="imgStyle{{index == Imgcurrent ? 'select' : ''}}"></image> </block> </view></view>wxss代码
.content { display: flex; justify-content: center;}.imgStyle { width: 120rpx; height: 80rpx; border:1px solid red; margin: 4rpx; margin-top: 8rpx; transition: all 0.6s;}js代码
Page({ data: { list: [{ urlImg: '../../img/1.png' }, { urlImg: '../../img/2.png' }, { urlImg: '../../img/3.png' }, { urlImg: '../../img/4.png' }, { urlImg: '../../img/5.png' }, ], swiperCurrent: 0, windowWidth: wx.getSystemInfoSync().windowWidth }, move: function(e) { // console.log(e) this.setData({ swiperCurrent: e.currentTarget.dataset.i }) }, swiperChange: function(e) { // console.log(e) this.setData({ swiperCurrent: e.detail.current }) }})
