本文实例为大家分享了微信小程序swiper轮播图组件的使用,供大家参考,具体内容如下 在components中新建文件夹swiper components/swiper/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'],
}
--结束END--
本文标题: 微信小程序swiper轮播图组件使用方法详解
本文链接: https://www.lsjlt.com/news/153704.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0