微信小程序轮播图自定义控制组件方法。

//今天刚学小程序第四天做了一个小小轮播图

//因为小程序已经给我们组件swiper了所以我们不需要重新写轮播js只需要 定义标签和各种属性就好了。这篇主要讲控制组件（下边的小点）

//index.wxml定义

< view class= "banner-wrapper">

< swiper class = "banner-list" indicator-dots = '' autoplay = 'true' interval = '2000' duration = '500' circular = "true" bindchange= "swiperChange">//这里是当图片发生改变时要调用的方法

<block wx:for="{{imageUrls}}">

//这里是遍历的图片张数

                < swiper-item >

< image src= '{{item}}'></ image >

</ swiper-item >

</ block >

</ swiper >

//这里是自定义控制组件的模块

<view class="dots">

<block wx:for="{{imageUrls}}" wx:key="unque">

//循环图片张数有多少张图片就有多少个小点

<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>

</block>

</view>

</ view >

//index.wxss的定义

.banner-wrapper{ background: #fff; height: 320 rpx; padding: 10 rpx 20 rpx; position: relative;}

.banner-wrapper > .banner-list{ border-radius: 20 rpx; height: 100%; overflow: hidden; box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.2 );}

.banner-wrapper > .banner-list image{ width: 100%; height: 100%;}

.banner-wrapper .dots{

position: absolute;

left: 0;

right: 0;

bottom: -20 rpx;

display: flex;

justify-content: center;

}

.banner-wrapper .dots .dot{

margin: 0 8 rpx;

width: 14 rpx;

height: 14 rpx;

background: #A2A2A2;

border-radius: 8 rpx;

transition: all .6s;

}

.banner-wrapper .dots .dot.active{

width: 30 rpx;

background: #A2A2A2;

}

//index.js中

Page({

data: {

swiperCurrent: 0,

imageUrls:[//wxml循环的数组

'../../images/home_def_gg@3x.png',

'../../images/home_def_gg@3x.png',

'../../images/home_def_gg@3x.png',

'../../images/home_def_gg@3x.png'

],

links:[

'pages/server/server',

'www.baidu.com',

'www.baidu.com',

'www.baidu.com'

]

},

swiperChange: function (e) {

this.setData({

swiperCurrent: e.detail.current

})

}

}）

//我是小菜鸟（各位口下留情哦）！

发现不对欢迎指出