本文实例为大家分享了微信小程序swiper轮播图组件的使用，供大家参考，具体内容如下
在components中新建文件夹swiper
components/swiper/swiper.wxml
components/swiper/swiper.js
Component({
properties: {
swiperList: {
type: Array,
value: []// 默认数据（可以从引用组件处的属性传入该属性值）
}
},
data: {
currentIndex: 0 // 初始高亮下标
},
methods: {
/* 这里实现控制自定义轮播指示点高亮 */
swiperChange(e) {
this.setData({
currentIndex: e.detail.current
})
}
}
})
components/swiper/swiper.wxss
/* components/swiper/swiper.wxss */
.container {
position: relative;
}
.swiper-box {
width: 100%;
height: 364rpx;
}
.targetImg {
width: 100%;
height: 100%;
}
/*小圆点 */
.dots {
width: 100%;
height: 4rpx;
display: flex;
position: absolute;
bottom: 30rpx;
}
.dotsBox {
height: 4rpx;
display: flex;
margin: 0 auto;
}
/*未选中时的小圆点样式 */
.dot {
width: 26rpx;
height: 4rpx;
border-radius: 2rpx;
margin-right: 10rpx;
background-color: #ffffff;
opacity: 0.4;
}
/*选中以后的小圆点样式 */
.dot-active {
opacity: 1;
}
在pages文件中引用
json文件中
{
"usingComponents": {
"w-swiper":"/components/swiper/swiper"
}
}
html文件中
js文件中
data:{
sprList:['/images/img.png','/images/img.png'],
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。