微信小程序轮播框架如何单方向轮播?

　　微信小程序轮播框架如何单方向轮播?微信小程序开发可以制作微信小程序轮播图，一般微信小程序轮播框架都是两方向滑动的，那么微信小程序轮播框架如何单方向轮播?大家请往下看哦。

　　微信小程序轮播框架如何单方向轮播?

　　一：微信小程序轮播单方向轮播准备工作

　　我用两张图吧，如下所示：

　　1.jpg 2.jpg

二：编写微信小程序轮播单方向轮播xsml代码(即html)

　　在这里我们要是用标签来进行包裹，他有如下属*：

　　这些属*足够我们使用，我们为了是xsml页面简洁，所以我在这里使用了for循环，将使用到的资源放进js中进行循环。而且为了使数据可进行双向绑定，所以他的属*值我打算放到js中进行配置。

　　我的xsml代码如下：

　　autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">

　　三：js的配置

　　由于要实现微信小程序轮播单方向轮播，所以我们只要在js中进行配置需要的参数即可。由于我的两张图片使用的是1.jpg和2.jpg，所以我只需要在js中进行一个小小的循环即可，这个分情况而定，你么也可以把图片的地址直接放到数组里面;最后改好了之后记得setData一下，，不然没效果，js代码如下：

　　({

　　/**

　　* 页面的初始数据

　　*/

　　data: {

　　mode:"scaleToFill",

　　arr:[],

　　indicatorDots: true,

　　autoplay: true,

　　interval: 2000,

　　duration: 1000,

　　},

　　/**

　　* 生命周期函数--监听页面加载

　　*/

　　onLoad: function (options) {

　　var array = this.data.arr

　　for (let i = 1; i < 3; i++) {

　　array.push("img/" + i + ".jpg")

　　}

　　this.setData({ arr: array})

　　},

　　/**

　　* 生命周期函数--监听页面初次渲染完成

　　*/

　　onReady: function () {

　　},

　　/**

　　* 生命周期函数--监听页面显示

　　*/

　　onShow: function () {

　　},

　　/**

　　* 生命周期函数--监听页面隐藏

　　*/

　　onHide: function () {

　　},

　　/**

　　* 生命周期函数--监听页面卸载

　　*/

　　onUnload: function () {

　　},

　　/**

　　* 页面相关事件处理函数--监听用户下拉动作

　　*/

　　onPullDownRefresh: function () {

　　},

　　/**

　　* 页面上拉触底事件的处理函数

　　*/

　　onReachBottom: function () {

　　},

　　/**

　　* 用户点击右上角分享

　　*/

　　onShareAppMessage: function () {

　　},

　　/**

　　* 页面上拉触底事件的处理函数

　　*/

　　onReachBottom: function () {

　　},

　　/**

　　* 页面相关事件处理函数--监听用户下拉动作

　　*/

　　onPullDownRefresh: function () {

　　},

　　})

　　好了，我们来看一下微信小程序轮播框架单方向轮播最终效果：

　　微信小程序轮播框架如何单方向轮播?大部分的微信小程序开发者都知道实现微信小程序轮播图双方向滑动，以上就是微信小程序轮播框架如何单方向轮播的内容了，大家请多多关注微小乔哦。

相关推荐：

微信小程序轮播图样式有哪些？怎么设置小程序轮播图？

微信小程序轮播图代码参考

微信小程序轮播之文字轮播