本文讲轮播的实现,部分内容来源于官方文档,增加了笔者实际操作中的一些问题与经验。 本文基于微信小程序公测版,IDE:微信开发者工具 0.10.102800
组件 swiper
微信小程序原生就提供了轮播控件,在微信的文档中叫做 滑块视图容器。只需要简单的配置就可以实现轮播的效果。
上图是微信开发文档中给出的,但是笔者发现还有一个属性 vertical ,其值接受Boolean型变量,默认值为false。
当不设置 vertical 属性,或者 vertical="false" 时,指示点在组件下部,图片轮播从左至右,效果如下:
当设置 vertical="true" 时,指示点在组件右部,图片轮播从下至上,效果如下:
**注意: ** swiper是一个容器类视图,但是其中只能放置<swiper-item/>
组件,如放置其他节点,会被自动删除。
swiper-item
仅可放置在 swiper 组件中,宽高自动设置为100%。代表轮播中一帧的页面,通常以循环的方式加载到页面中。
代码如下:
<!--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>
注意代码中的 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 标签,以超链接的方式跳转页面。