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

　　微信小程序轮播之文字轮播，微信小程序轮播之文字轮播是如何操作的呢?下面小编就来为大家讲解一下微信小程序轮播之文字轮播。

　　组件 swiper

　　微信小程序原生就提供了轮播控件，在微信的文档中叫做滑块视图容器。只需要简单的配置就可以实现轮播的效果。

　　上图是微信开发文档中给出的，但是笔者发现还有一个属* vertical ，其值接受Boolean型变量，默认值为false。

　　当不设置 vertical 属*，或者 vertical=”false” 时，指示点在组件下部，图片轮播从左至右，效果如下：

　　当设置 vertical=”true” 时，指示点在组件右部，图片轮播从下至上，效果如下：

　　注意: swiper是一个容器类视图，但是其中只能放置组件，如放置其他节点，会被自动删除。

　　swiper-item

　　仅可放置在 swiper 组件中，宽高自动设置为100%。代表轮播中一帧的页面，通常以循环的方式加载到页面中。

　　代码如下：

　　autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">

　　1234567891011

　　//main.js

　　//获取应用实例

　　var app = getApp()

　　Page({

　　data: {

　　indicatorDots: true,

　　vertical: true,

　　autoplay: true,

　　interval: 3000,

　　duration: 1000,

　　loadingHidden: false // loading

　　},

　　//事件处理函数

　　swiperchange: function(e) {

　　// 此处写 轮播 改变时会触发的 change 事件

　　},

　　onLoad: function() {

　　console.log('onLoad')

　　var that = this

　　//sliderList

　　wx.request({

　　url: 'huanqiuxiaozhen/wemall/slider/list',

　　method: 'GET',

　　data: {},

　　header: {

　　'Accept': 'application/json'

　　},

　　success: function(res) {

　　that.setData({

　　images: res.data

　　})

　　}

　　})

　　}

　　})

　　item单击事件

　　在 swiper-item 上绑定事件，通过 data 自定义标签绑定数据。然后在function中通过event拿到。

　　autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">

　　注意代码中的 data-id 和 data-name 均为自定义标签，然后可以在绑定事件的event中通过 id 和 name 拿到。

　　// 轮播item点击事件

　　itemclick: function(e) {

　　wx.showToast({

　　title: e.currentTarget.dataset.id + "",

　　icon: 'success',

　　duration: 2000

　　})

　　},　　注意在绑定的function中可以通过event拿到对应的数据。如：e.currentTarget.dataset.id 对应wxml中的data-id

　　当然，还有另一种办法。不需要绑定事件，通过在每一个的 swiper-item 外面包上一个 a 标签，以超链接的方式跳转页面。

　　以上就是小编为大家整理的关于微信小程序轮播之文字轮播的内容。更多更精彩的内容请持续关注小程序商店。

　　相关阅读：

       微信小程序文字居中如何设置？

       微信小程序文字如何排版？

       微信小程序文字换行怎么做？