本篇内容介绍了“微信小程序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
.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'],}“微信小程序swiper轮播图组件如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
