微信小程序中如何详细使用swiper轮播图组件？

本文共计509个文字，预计阅读时间需要3分钟。

原文示例：本文字例为大家分享了微信小程序swiper轮播图组件的使用，供大家参考，具体内容如下：

在components中新建文件夹swipercomponents/swiper/swiper.wxml!--components/swiper/swiper.wxml--view class=container-->

改写后：本例介绍微信小程序swiper轮播图组件应用，供参考。步骤如下：

1. 在components文件夹下创建swiper文件夹

2.在swiper文件夹下创建swiper.wxml文件

3.在swiper.wxml文件中添加以下代码：

本文实例为大家分享了微信小程序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'], }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。