index.wxml
<view class="swiper-container">
<swiper autoplay="{{autoplay}}"
circular="{{true}}"
indicator-dots="{{false}}"
current="{{swiperCurrent}}" vertical="{{false}}" bindchange="swiperChange">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" mode="widthFix"></image>
</swiper-item>
</block>
</swiper>
<view wx:if="{{imgUrls.length > 1}}" class="dots-container">
<block wx:for="{{imgUrls}}">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}" bind:tap="onDotTap" mark:index="{{index}}"></view>
</block>
</view>
</view>
index.js
Page({
data: {
autoplay:true,
swiperCurrent: 0,
imgUrls: [
'','','',''
]
},
swiperChange: function (e) {
let that = this;
that.setData({
swiperCurrent: e.detail.current
})
},
onDotTap(e){
this.setData({autoplay:false});
console.log(e);
const {index} = e.mark;
//设置滚动
this.setData({swiperCurrent:index,autoplay:true});
}
})
index.js
.swiper-container{
position: relative;
}
swiper{
height: 300rpx;
background-color: orange;
}
swiper-item{
height: 100%;
width: 100%;
background-color: blue;
}
swiper-item image{
width: 100%;
height: 100%;
}
swiper-item:nth-child(1){
background-color: chartreuse;
}
swiper-item:nth-child(2){
background-color: red;
}
swiper-item:nth-child(3){
background-color: rebeccapurple;
}
swiper-item:nth-child(4){
background-color: cyan;
}
.dots-container{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: 10rpx;
left:50%;
transform:translate(-50%);
/* background-color: gray; */
}
.dot{
height: 20rpx;
width: 20rpx;
background-color: #9A9A9A;
border-radius: 10rpx;
margin-left: 20rpx;
transition: all .25s;
box-sizing: border-box;
border:1rpx solid white;
}
.dot.active{
width: 40rpx;
background: #fff;
}
.dot:nth-of-type(1){
margin-left: 0;
}
来源：https://www.eyoucms.com/wxmini/doc/course/26820.html
扩展：https://blog.csdn.net/PlasticsShaT/article/details/119896210
https://gitcode.csdn.net/65eed85f1a836825ed79fbc3.html