官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
滑块视图容器,这里我们使用这个视图实现轮播图的效果,
效果图如下,
1.index.js中:
//index.js
//获取应用实例
const app = getApp()
var dotsFirst = true;
var isCircularFirst = true;
var isVerticalFirst = true;
Page({
data: {
isCircular: true,//默认衔接滑动
interval: 3000,//默认自动切换时间间隔
duration: 1000,//默认滑动动画时长
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
},
onLoad: function () {
},
//显示/隐藏指示器
showDots: function () {
if (dotsFirst == true) {
dotsFirst = false;
this.setData({
indicatorDots: true,
});
} else {
dotsFirst = true;
this.setData({
indicatorDots: false,
});
}
},
//设置,取消衔接滑动
showCircular: function () {
if (isCircularFirst == true) {
isCircularFirst = false;
this.setData({
isCircular: true,
});
} else {
isCircularFirst = true;
this.setData({
isCircular: false,
});
}
},
//设置,取消滑动方向是否为纵向
showVertical: function () {
if (isVerticalFirst == true) {
isVerticalFirst = false;
this.setData({
vertical: true,
});
} else {
isVerticalFirst = true;
this.setData({
vertical: false,
});
}
},
//设置指示器颜色事件
icInput: function (e) {
this.setData({
indicatorColor: e.detail.value
})
},
//设置自动切换时间的间隔事件
iInput: function (e) {
this.setData({
interval: e.detail.value
})
},
//设置自动切换时间的间隔事件
dInput: function (e) {
this.setData({
duration: e.detail.value
})
},
//设置当前选中的指示点颜色事件
iacInput: function (e) {
this.setData({
indicatorActiveColor: e.detail.value
})
},
})
2.index.wxml中:
<swiper indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" autoplay='{isAutoplay}' current='0' interval="{{interval}}" duration="{{duration}}" circular="{{isCircular}}" vertical="{{vertical}}" indicator-active-color="{{indicatorActiveColor}}">
<block wx:for="{{imgUrls}}" wx:key="imageKey">
<swiper-item>
<image src="{{item}}" class="image" />
</swiper-item>
</block>
</swiper>
<button class='buton' catchtap='showDots'>显示/隐藏指示器</button>
<button class='buton' catchtap='showCircular'>设置/取消衔接滑动</button>
<button class='buton' catchtap='showVertical'>设置/取消滑动方向是否为纵向</button>
<view>
<view class='text'>设置指示器的颜色(请使用十六进制颜色值,例如:#ff00ff)</view>
<input class="input" placeholder="" value="#" bindinput="icInput" confirm-type="done" focus/>
</view>
<view>
<view class='text'>设置自动切换时间间隔(单位毫秒(ms),例如:3000就是3秒)</view>
<input class="input" placeholder="" type="number" value="3000" bindinput="iInput" confirm-type="done" focus/>
</view>
<view>
<view class='text'>设置滑动动画时长(单位毫秒(ms),例如:1000就是1秒)</view>
<input class="input" placeholder="" type="number" value="1000" bindinput="dInput" confirm-type="done" focus/>
</view>
<view>
<view class='text'>设置当前选中的指示点颜色(请使用十六进制颜色值,例如:#ff00ff)</view>
<input class="input" placeholder="" value="#" bindinput="iacInput" confirm-type="done" focus/>
</view>
3.index.wxss中:
.image {
width: 100%;
}
.buton {
margin-top: 10rpx;
}
.input {
width: 100%;
padding-left: 10rpx;
margin-top: 10rpx;
font-size: 35rpx;
background-color: #ccc;
}
.text {
font-size: 35rpx;
margin-top: 10rpx;
padding-left: 10rpx;
}
4.demo下载地址:
本人菜鸟一个,有什么不对的地方,希望大家指出评论,大神勿喷,希望大家一起学习进步!