How to build your own swiper carousel in WeChat applet???
---------------------------------------Syntax separators------- -------------------------------------------------- ---------------------
--------------------------------------- Actual dividing line------- -------------------------------------------------- -------------------
/* ***.wwxml*/
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" previous-margin="15px" next-margin="10px" >
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="0" height="150"/>
</swiper-item>
</block>
</swiper>
/* ***.wss */
.swiper {
height: 400rpx;
width: 100%;
margin-left: 25rpx;
padding: 0;
}
.swiper image {
height: 100%;
width: 110%;
position:absolute;
}
/* ***.js */
Page({
data: {
imgUrls: [
'../images/swipers/one.jpg',
'../images/swipers/two.jpg',
'../images/swipers/three.jpg'
],
indicatorDots: true,
circular:false,
autoplay: true,
current:1,
interval: 5000,
duration: 1000,
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
}
})
/* **.json */
{
"navigationBarTitleText": "Feature List"
}
The above is the code of the carousel image. Let's take a look at the effect:
----------------------------------------------------------------------------------------------------------------
转载
声明：本文为博主原创文章，未经博主允许不得转载。
----------------------------------------------------------------------------------------------------------------
文章中，有问题，可以在评论区评论，一起探讨编程中奥秘！
----------------------------------------------------------------------------------------------------------------
来都来了，那就点个赞吧
