由于原生的点限制太多,这里展示下,手动自己实现指示点
html
<!-- 轮播图 -->
<swiper class='banner-top' indicator-dots="{{false}}" autoplay="{{true}}" interval="{{4500}}" duration="{{666}}" circular="{{true}}" indicator-color="#D8D8D8" indicator-active-color="#FF5C5C" bindchange="bannerChange">
<block wx:for="{{bannerList}}" wx:key="{{index}}">
<swiper-item class="swiper-item">
<image src="{{item.image}}" class="slide-image" data-goods="{{item.id}}" bindtap="toDetail" />
<view class='banner-title'>{{item.name}}</view>
</swiper-item>
</block>
</swiper>
<view class='banner-dot'>
<view class='item-dot {{index == swiperCurrent ? "active-dot": ""}}' wx:for="{{bannerList}}" wx:key="{{index}}"></view>
</view>
css
swiper-item {
position: relative;
padding: 20rpx 20rpx 0;
width: 100vw;
}
.banner-title{
position: absolute;
bottom:0;
left:20rpx;
padding-left:32rpx;
height: 56rpx;
font-size: 28rpx;
line-height: 56rpx;
width:calc(100% - 40rpx);
color:#fff;
background:rgba(51,51,51,.4);
}
.banner-dot{
width:100%;
text-align: center;
position: absolute;
top:215rpx;
}
.item-dot{
width:18rpx;
height: 18rpx;
background:#d8d8d8;
display: inline-block;
border-radius: 50%;
}
.item-dot + .item-dot{
margin-left:16rpx;
}
.active-dot{
background:#FF5C5C;
}
js
bannerChange(e){
// console.log(e)
this.setData({
swiperCurrent:e.detail.current
})
}