自定义小程序swiper指示点样式
2018-12-21 本文已影响0人
AHi_ae80
image
小程序不提供swiper指示点的样式自定义。只能自己写一个指示点样式，替换掉。
index.wxml
<view class='warp'>
<swiper class='swiper' current='{{currentSwiper}}' autoplay bindchange='swiperChange'>
<block wx:for="{{imgUrls}}" wx:key="">
<swiper-item>
<image src='{{item}}' class='img'></image>
</swiper-item>
</block>
</swiper>
<view class='dots'>
<block wx:for="{{imgUrls}}" wx:key="">
<view class='dot {{index == currentSwiper ?"active":""}}'></view>
</block>
</view>
</view>
index.wxss
.warp{
height: auto;
position: relative;
}
.swiper{
height: 220rpx;
}
.swiper .img{
width: 100%;
height: 100%;
}
.dots{
width: 256rpx;
height: 36rpx;
display: flex;
flex-direction: row;
position: absolute;
right: 20rpx;
bottom: 5rpx;
justify-content: center;
align-items: center;
}
.dot{
width: 30rpx;
height: 8rpx;
border-radius: 30rpx;
margin-right: 10rpx;
background-color: white;
}
.active{
width: 70rpx;
background-color: coral;
}
index.js
Page({
data: {
imgUrls: [
'http://47.105.139.205/1.jpg',
'http://47.105.139.205/2.jpg',
'http://47.105.139.205/3.jpg'
],
currentSwiper : 0
},
swiperChange:function(event){
this.setData({
currentSwiper: event.detail.current
});
},
})
