滑块视图容器 swiper
2017-08-21 17:37
176 查看
属性名 | 类型 | 默认值 | 说明 |
indicator-dots | Boolean | false | 是否显示面板指示点 |
autoplay | Boolean | false | 是否自动切换 |
current | Number | 0 | 当前所在页面的 index |
interval | Number | 5000 | 自动切换时间间隔 |
duration | Number | 1000 | 滑动动画时长 |
bindchange | EventHandle | current 改变时会触发 change 事件,event.detail = {current: current} |
swiper-item
仅可放置在<swiper/>组件中,宽高自动设置为100%。
<view class="page">
<view class="page__hd">
<text class="page__title">swiper</text>
<text class="page__desc">swiper</text>
</view>
<view class="page__bd">
<view class="section section_gap swiper">
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}">
<swiper-item>
<view class="swiper-item bc_{{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
<view class="btn-area">
<button type="default" bindtap="changeIndeicatoirDots">indicator-dots</button>
<button type="default" bindtap="changeVertical"> {{vertical?'horizontal':'vertical'}}</button>
<button type="default" bindtap="changeAutoplay">autoplay</button>
</view>
<slider bindchange="durationChange" value="{{duration}}" show-value min="500" max="2000" />
<view class="section__title">duration</view>
<slider bindchange="intervalChange" value="{{interval}}" show-value min="2000" max="10000" />
<view class="section__title">interval</view>
</view>
</view>
Page({
data:{
background:['green','red','yellow'],
indicatorDots:true,
vertical:false,
autoplay:true,
interval:3000,
duration:1200
},
changeIndeicatoirDots : function (e) {
this.setData({
indicatorDots : !this.data.indicatorDots
})
},
changeVertical : function (e) {
this.setData({
vertical: !this.data.vertical
})
},
changeAutoplay: function (e){
this.setData({
autoplay:!this.data.autoplay
})
},
durationChange: function (e){
this.setData({
duration:e.detail.value
})
},
intervalChange: function (e) {
this.setData({
interval:e.detail.value
})
}
})
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>
1234567891011
注意代码中的 data-id 和 data-name 均为自定义标签,然后可以在绑定事件的event中通过 id 和 name 拿到。
// 轮播item点击事件 itemclick: function(e) { wx.showToast({ title: e.currentTarget.dataset.id + "", icon: 'success', duration: 2000 }) },
12345678
注意在绑定的function中可以通过event拿到对应的数据。如:e.currentTarget.dataset.id 对应wxml中的data-id
当然,还有另一种办法。不需要绑定事件,通过在每一个的 swiper-item 外面包上一个 a 标签,以超链接的方式跳转页面。
相关文章推荐
- 2.1.3微信小程序滑块视图容器 swiper
- 微信小程序之滑块视图容器(swiper)
- 微信小程序 开发之滑块视图容器(swiper)详解及实例代码
- 04、swiper 滑块视图容器的使用
- 微信小程序—swiper(滑块视图容器)
- 实现滑块视图容器 swiper
- swiper 滑块视图容器。
- swiper-滑块视图容器
- 微信小程序视图容器(swiper)组件创建轮播图
- 【微信小程序笔记-3】组件-视图容器(ScrollView和Swiper)
- 微信小程序的视图容器—swiper
- 微信小程序的视图容器—swiper
- 小程序开发总结3:swiper滑块视图
- 微信小程序 教程之wxapp视图容器 swiper
- Android应用开发中自定义ViewGroup视图容器的教程
- 微信小程序-view(视图容器)
- react-native-swiper在滚动视图中默认不显示图片的问题
- 微信小程序 wxapp视图容器 view详解
- 视图控制器容器 无脑意译
- 小程序开发基础之view视图容器