本篇内容介绍了“微信小程序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轮播图组件如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。