emmm先上效果图
微信小程序的swiper组件默认的指示点是小圆点,然后也不能修改它的大小和形状。
当然有时候我们希望更多样话,能够有更多的元素加载里面。
办法总比困难多,既然系统没有,那么我们就自己创一个指示点。
这就要用到swiper中的bindchange属性和current属性
所以,我们的中心思想就是获取当前轮播图滑块的index,然后传到js文件中,再创建一些受到js控制的视图容器,那我们就可以拥有更多样化的指示点了
//wxml
//创建一个轮播图
<swiper current="{{swiperCurrent}}" bindchange="swiperChange" circular="true">
<swiper-item><view class="a" style="background-color: red;"></view></swiper-item>
<swiper-item><view class="a" style="background-color: black;"></view></swiper-item>
<swiper-item><view class="a" style="background-color: blue;"></view></swiper-item>
</swiper>
//设计属于我们的指示点
<view class="dots">
<block wx:for="{{page}}" wx:key>
<view class="{{index==swiperCurrent?'active':'dot'}}">
</view>
</block>
</view>
//wxss
.a{
width: 100%;
height: 100%;
}
.dots{
width: 750rpx;
height: 20rpx;
display: flex;
flex-direction: row;
margin-top: 50px;
}
.dot{
width: 130rpx;
height: 10rpx;
border-radius: 14rpx;
margin-left: 90rpx;
background-color: rgb(252, 248, 248);
}
.active{
width: 130rpx;
height: 10rpx;
border-radius: 14rpx;
margin-left: 90rpx;
background-color: rgba(253, 82, 82, 0.966);
}
//js
data: {
swiperCurrent:'',
page:[0,1,2]
},
swiperChange:function(e){
this.setData({
swiperCurrent:e.detail.current
})
}
这样就可以了,还可以加图片啊什么的,看需求吧
听说点赞、评论、收藏的小伙伴都拿到了大公司的offer了呢