微信小程序的视图容器—swiper
2017-05-16 00:00
369 查看
swiper滑动面板(又称滑块视图容器,常见的轮播图)
注意:其中只可放置swiper-item组件,其他节点会被自动删除
swiper-item
仅可放置在swiper组件中,宽高自动设置为100%
在.wxml文件中设置swiper
设置indicator-dots="true"显示面板指示点,当前页面为第4页,每次页面切换的时间为5000ms,滑动时长1000ms,绑定页面改变触发事件bindChange。页面显示的图片在imgArray数组中,通过wx:for绑定。
<swiper indicator-dots="true" autoplay="true"current="3" duration="1000"interval="5000"bindchange="changeCurrent">
<block wx:for="{{imgArray}}">
<swiper-item>
<image src="{{item}}" class="img"></image>
</swiper-item>
</block>
</swiper>
在.wxsss中设置图片的宽度
.img{
width:100%;
}
在.js中设置保存图片的数组imgArray
Page({
data:{
imgArray:['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1771329155,1268478148&fm=206&gp=0.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615418&di=e0ab48f7c68c3c50e4ef91a719bbda9b&imgtype=0&src=http%3A%2F%2Fbbs.crsky.com%2F1236983883%2FMon_1209%2F25_187069_eaac13adbd074a5.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615417&di=ef7d8abc8c206aa7edc2042a122e6d1c&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff3%2F76%2Fd%2F119.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615416&di=9a5d6c7c2ad748711f2ea82f947e9ea1&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff5%2F152%2Fd%2F48.jpg']
},
并执行changeCurren方法
changeCurrent:function(){
console.log("我滚动了");
}
运行结果:
页面此时已经发生滚动,显示第一张图片,底部第一个小圆点颜色变亮。当页面滚动的时候控制台回打印出:我滚动了
属性名 | 类型 | 默认值 | 说明 |
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%
在.wxml文件中设置swiper
设置indicator-dots="true"显示面板指示点,当前页面为第4页,每次页面切换的时间为5000ms,滑动时长1000ms,绑定页面改变触发事件bindChange。页面显示的图片在imgArray数组中,通过wx:for绑定。
<swiper indicator-dots="true" autoplay="true"current="3" duration="1000"interval="5000"bindchange="changeCurrent">
<block wx:for="{{imgArray}}">
<swiper-item>
<image src="{{item}}" class="img"></image>
</swiper-item>
</block>
</swiper>
在.wxsss中设置图片的宽度
.img{
width:100%;
}
在.js中设置保存图片的数组imgArray
Page({
data:{
imgArray:['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1771329155,1268478148&fm=206&gp=0.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615418&di=e0ab48f7c68c3c50e4ef91a719bbda9b&imgtype=0&src=http%3A%2F%2Fbbs.crsky.com%2F1236983883%2FMon_1209%2F25_187069_eaac13adbd074a5.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615417&di=ef7d8abc8c206aa7edc2042a122e6d1c&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff3%2F76%2Fd%2F119.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615416&di=9a5d6c7c2ad748711f2ea82f947e9ea1&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff5%2F152%2Fd%2F48.jpg']
},
并执行changeCurren方法
changeCurrent:function(){
console.log("我滚动了");
}
运行结果:
页面此时已经发生滚动,显示第一张图片,底部第一个小圆点颜色变亮。当页面滚动的时候控制台回打印出:我滚动了
相关文章推荐
- 微信小程序 开发之滑块视图容器(swiper)详解及实例代码
- 微信小程序的视图容器—swiper
- 微信小程序视图容器(swiper)组件创建轮播图
- 微信小程序之滑块视图容器(swiper)
- 2.1.3微信小程序滑块视图容器 swiper
- 微信小程序 教程之wxapp视图容器 swiper
- 微信小程序—swiper(滑块视图容器)
- 【微信小程序笔记-3】组件-视图容器(ScrollView和Swiper)
- 2.1.1微信小程序视图容器 view
- 微信小程序 视图容器组件的详解及实例代码
- 3、微信小程序笔记---视图容器
- 用微信小程序开店之五——小程序组件1:“视图容器”
- 微信小程序--movable-view(可移动的视图容器)
- 微信小程序的视图容器-view
- 微信小程序基础组件之视图容器
- 微信小程序 教程之wxapp视图容器 scroll-view
- 微信小程序-view(视图容器)
- 微信小程序 教程之wxapp视图容器 scroll-view
- 微信小程序组件解读和分析:一、view(视图容器 )
- 微信小程序 教程之wxapp 视图容器 view