微信小程序—swiper轮播图组件
在components中新建文件夹swiper
components/swiper/swiper.wxml
<!--components/swiper/swiper.wxml--><view class="container"><swiper class="swiper-box" bind:change="swiperChange" interval="4000" circular autoplay><block wx:for="{{swiperList}}" wx:key="index"><swiper-item><image class="targetImg" src="{{item}}" mode="aspectFill"></image></swiper-item></block></swiper><!--重置小圆点的样式 --><view class="dots"><view class="dotsBox" style='width:{{(swiperList.length*26+swiperList.length*10) + "rpx"}}'><!-- <view class="dotsBox" style='width:180rpx'> --><block wx:for="{{swiperList}}" wx:key="index"><text class="dot {{index == currentIndex ? 'dot-active' : ''}}"></text></block></view></view></view>
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文件中
<w-swiper swiperList="{{sprList}}" />
js文件中
data:{sprList:['/images/img.png','/images/img.png'],}
