微信小程序swiper轮播图组件如何使用

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