swiper滑动面板又称滑块(slide block)视图容器，常见的轮播图
swiper?滑动面板(又称滑块(slide block)视图容器，常见的轮播图)
属性(property)名
类型
默认值
说明
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组件，其他节点会被自动删除
current改变时会触发change事件，event。
宁波小程序开发对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。detail={current:current}
注意：其中只可放置swiper-item组件，其他节点会被自动删除
swiper-item
仅可放置在swiper组件中，宽高自动设置为100%
在。wxml文件中设置swiper
设置indicator-dots="true"显示面板指示点，当前页面为第4页，每次页面切换的时间为5000ms，滑动时长1000ms，绑定页面改变触发事件bindChange。页面显示的图片在imgArray数组中，通过wx：for绑定。
lt;swiper indicator-dots="true" autoplay="true"current="3" duration="1000"interval="5000"bindchange="changeCurrent" gt; lt;block wx:for="{{imgArray}}" gt; lt;swiper-item gt; lt;image src="{{item}}" gt; lt;/image gt; lt;/swiper-item gt; lt;/block gt; lt;/swiper gt;
在。wxsss中设置图片的宽度。img{
width:100%;}
在。宁波微信小程序开发其中，通过公众号关联，用户可以实现公众号与小程序之间相互跳转。小程序体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。 js中设置保存图片的数组imgArray
Page({ data:{
imgArray:['httPHOTOSHOP://ss3。bdstatic。com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1771329155,1268478148 amp;fm=206 amp;gp=0。jpg','httPHOTOSHOP://timgsa。baidu。com/timg?image amp;quality=80 amp;size=b9999_10000 amp;sec=1490269615418 amp;di=e0ab48f7c68c3c50e4ef91a719bbda9b amp;imgtype=0 amp;src=http%3A%2F%2Fbbs。crsky。com%2F1236983883%2FMon_1209%2F25_187069_eaac13adbd074a5。jpg','httPHOTOSHOP://timgsa。baidu。com/timg?image amp;quality=80 amp;size=b9999_10000 amp;sec=1490269615417 amp;di=ef7d8abc8c206aa7edc2042a122e6d1c amp;imgtype=0 amp;src=http%3A%2F%2Fimg2。3lian。com%2F2014%2Ff3%2F76%2Fd%2F119。jpg','httPHOTOSHOP://timgsa。baidu。com/timg?image amp;quality=80 amp;size=b9999_10000 amp;sec=1490269615416 amp;di=9a5d6c7c2ad748711f2ea82f947e9ea1 amp;imgtype=0 amp;src=http%3A%2F%2Fimg2。3lian。com%2F2014%2Ff5%2F152%2Fd%2F48。jpg'] },并执行changeCurren方法changeCurrent:function(){
console。log("我滚动了"); }
运行结果：
页面此时已经发生滚动，显示第一张图片，底部第一个小圆点颜色变亮。当页面滚动的时候控制（control)台回打印出：我滚动了
