效果展示:
test.wxml:
previous-margin='50' next-margin='50' autoplay='true' interval='2000'>
{{ item.text }}
test.wxss:
swiper{
height: 200px;
}
.optionBox {
width: 100%;
height: 90%;
}
.optionBox image {
width: 100%;
height: 100%;
}
.swiperText {
width: 100%;
height: 25px;
text-align: center;
font-family: bariol_bold;
font-size: 0.5em;
color: #4a4a4a;
}
.mask {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .5);
position: absolute;
left: 0;
top: 0;
}
.perch {
width: 100%;
height: 100%;
}
test.js:
// text/text.js
Page({
/**
* 页面的初始数据
*/
data: {
imgInfoArrLength: 0, // 轮播图列表的长度
centerItem: 0, // 居中项的位置
imgInfoArr: [
{
src: 'https://qidian.qpic.cn/qidian_common/349573/16af4f9cfd8b15a6cea1df7eea361a91/0',
text: '测试数据',
id: 0
},
{
src: 'https://qidian.qpic.cn/qidian_common/349573/e1f9f863e6f8fe99c9002e88eb96326b/0',
text: '测试数据',
id: 1
},
{
src: 'https://qidian.qpic.cn/qidian_common/349573/6805566e37fae69d0be5677f5367889a/0',
text: '测试数据',
id: 2
},
{
src: 'https://img-blog.csdnimg.cn/img_convert/38f33b9524fd9721a94288ac362df44f.png',
text: '测试数据',
id: 3
},
{
src: 'https://img-blog.csdnimg.cn/img_convert/8e67cedfa44958ddf6cd6d06c7442d06.gif',
text: '测试数据',
id: 4
},
{
src: 'https://img-blog.csdnimg.cn/img_convert/22b38b7a25bacf62baee4780453f630a.png',
text: '测试数据',
id: 5
},
{
src: 'https://img-blog.csdnimg.cn/img_convert/a8965b22caafad7ad17f77f571e3b5ce.png',
text: '测试数据',
id: 6
}
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var len = this.data.imgInfoArr.length;
var center = parseInt(len/2);
this.setData({
imgInfoArrLength: len,
centerItem: center
})
},
changeFun(e) {
this.setData({
centerItem: e.detail.current,
})
}
})