微信小程序开发向导：对于轮播

[摘要]应用中最常见的应该就是轮图了，本文讲轮播的实现，部分内容来源于官方文档，增加了笔者实际操作中的一些问题与经验。本文基于微信小程序公测版，IDE：微信开发者工具 0.10.102800组件 swip...

应用中最常见的应该就是轮图了，本文讲轮播的实现，部分内容来源于官方文档，增加了笔者实际操作中的一些问题与经验。
本文基于微信小程序公测版，IDE：微信开发者工具 0.10.102800

组件 swiper

微信小程序开发向导：对于轮播

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

微信小程序开发向导：对于轮播

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

微信小程序开发向导：对于轮播

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

swiper-item

代码如下：

<!--main.wxml-->
<view>
    <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
        <block wx:for="{{images}}">
            <swiper-item>
                <image src="{{item.picurl}}" class="slide-image"/>
            </swiper-item>
        </block>
    </swiper>
</view>

//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: 'http://huanqiuxiaozhen.com/wemall/slider/list', method: 'GET', data: {}, header: { 'Accept': 'application/json' }, success: function(res) { that.setData({ images: res.data }) } }) } })

item单击事件

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

<!--main.wxml-->
<view>
    <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
        <block wx:for="{{images}}">
            <swiper-item bindtap="itemclick" data-id="{{item.id}}" data-name="{{item.name}}">
                <image src="{{item.picurl}}" class="slide-image"/>
            </swiper-item>
        </block>
    </swiper>
</view>// 轮播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 标签，以超链接的方式跳转页面。
更多微信小程序开发指南：关于轮播相关文章请关注PHP中文网！				
				

					微信
					分享
				

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。



  关键词：微信小程序开发向导：对于轮播