微信小程序swiper滑动面板使用示例

本文举例说明了微信小程序swiper滑动面板的用法。分享给大家参考，如下：

Swiper将来被用来做旋转木马。以下是它的一些属性

PS:微信小程序组件请参考http://tools.jb51.net/table/wx_component或https://developers.weixin.qq.com/miniprogram/dev/component/,官网的在线工具微信小程序组件说明表

1.首先创建一个新页面(记得在app.json中注册)并打印渲染。

2.2.index.wxml中的代码

Swiper class=' view-item ' indicator-dots=' true ' autoplay=' true ' Swiper-item class=' BG-green ' view Content/view/Swiper-item wiper-item wiper-item class=' BG-yellow ' view Content/view-item wiper-item class=' BG-blue ' view Content/view/scanner-item/scanner注意：只有scanner-item组件可以放在scanner标签中，其他标签如果不放在scanner-item标签下就没用了。

注意：要实现滑动面板，必须有两个标签:swiper和swiper-item，其中一个是控制整个转盘的大小和样式。而swiper-item控制子视图。

indicator-dots=“true”-显示真或隐藏假的三个点autoplay=“true”-是否自动播放。current=" 2 "—首先显示第(i-1)个视图，因为i-1从0开始，就像一个数组一样。interval=" 1000 "-意思是每几秒钟换一张图片，1000就是一秒钟。duration=“3000”-意思是从一页滑到另一页需要的时间，但是我发现一个有趣的现象。如果您有interval=“1000”，您希望在完成滑动一页之前滑动到第三页。

3.官方代码的有趣之处在于它不起作用。一开始我以为自己错了，最后发现官方的swpier写的是SWPIER，微信小程序还需要完善。首先，应用渲染

In index.wxml

swpier指示器-dots=' { { indicatorDots } } ' autoplay=' { { autoplay } } ' interval=' { { interval } } ' duration=' { { duration } } ' block wx : for-items=' { { imgUrls } } ' SW pier-item image src=' http : { { item } } ' class=' slide-image ' width=' 355 ' height=' 150 '//SW pier-item/block/swpier button bind tap=' change indicatorDots

page({ data : { imgurls :[' http://img 02 . tooopen.com/images/20150928/tooopen _ sy _ 143912755726 . jpg '，' http://img 06 . tooopen.com/images/20160818/tooopen _ sy _ 175866434296 . jpg '，' http://img 06 . tooopen.com/20160818/tooopen _ sy _ 175866434296 . jpg '，' 33http://this.data.indicatorDots }) }，changeAutoplay:函数(e) { this.setData({ autoplay:this.data.autoplay }) }，intervalChange:函数(e) { this . setdata({ interval : e . detail . value })}，Duration change :函数(e){ this。setdata ({duration :e。细节。value})})其实你也应该发现，微信小程序的index.wxml和index.wxss文件很容易理解，也很容易使用。难点在于对index.js和index.json的理解，也就是程序逻辑的处理。

希望本文对微信小程序的设计有所帮助。