微信小程序swiper轮播图组件使用方法详解
作者:In Heaven
这篇文章主要为大家详细介绍了微信小程序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'], }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。