微信小程序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

/* 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轮播图组件使用方法详解的详细内容...