本文实例讲述了微信小程序之偷窃者滑动面板用法。分享给大家供大家参考,具体如下:
偷窃者就是为了以后做轮播图用的。下面是一些它的属性
PS:关于微信小程序组件可参考本站在线工具http://tools.jb51.net/table/wx_component
或官网https://developers.weixin.qq.com/miniprogram/dev/component/
1。首先新建一个页面(记得在app.json中注册)、上效果图。
2. index.wxml中的代码
& lt;偷窃者类="视图" indicator-dots=" true "播放=" true "比;
& lt; swiper-item类=癰g-green”比;
& lt;视图祝辞Content
& lt;/swiper-item>
& lt; swiper-item类=癰g-yellow”比;
& lt;视图祝辞Content
& lt;/swiper-item>
& lt; swiper-item类=癰g-blue”比;
& lt;视图祝辞Content
& lt;/swiper-item>
& lt;/swiper>
<强>注意:
<强>注意:
<代码> indicator-dots=" true ">
<代码>播放=" true ">
<代码>当前=" 2 ">
<代码>间隔=" 1000 ">
<代码>=" 3000 ">
3。官方提供的代码有意思的是它居然没效果,刚开始我还以为自己哪里错了,最后才发现官方吧偷窃者写成swpier,开来微信小程序还待完善啊。先上效果图
index.wxml中
& lt; swpier indicator-dots=" {{indicatorDots}}”
播放="{{播放}}"间隔时间="{{间隔}}"="{{时间}}”在
& lt;块wx:项=" {{imgUrls}}”在
& lt; swpier-item>
& lt;图像src=" https://www.yisu.com/zixun/{{项}}”类=盎玫破枷窨矶?=" 150 "/" 355 "高度比;
& lt;/swpier-item>
& lt;/block>
& lt;/swpier>
& lt;按钮bindtap=癱hangeIndicatorDots”比;indicator-dots & lt;/button>
& lt;按钮bindtap=癱hangeAutoplay”比;播放& lt;/button>
& lt;滑块bindchange=" intervalChange "显示值最小值=" 500 " max=" 2000 "/比;时间间隔
& lt;滑块bindchange=" durationChange "显示值最小值=" 1000 " max=" 10000 "/比;持续时间
之前
index.js
页面({
数据:{
imgUrls:(
“http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg”,
“http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg”,
“http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg”
),
indicatorDots:假的,
播放:假的,
区间:5000年,
持续时间:1000
},
changeIndicatorDots:函数(e) {
this.setData ({
indicatorDots: this.data.indicatorDots !
}）
},
changeAutoplay:函数(e) {
this.setData ({
播放:this.data.autoplay !
}）
},
intervalChange:函数(e) {
this.setData ({
间隔:e.detail.value
}）
},
durationChange:函数(e) {
this.setData ({
持续时间:e.detail.value
}）
}
}）
之前
其实,你应该也发现了,微信小程序的index.wxml和index.wxss文件很好理解并且很好上的手,难点就在于index.js和index.json的理解,也就是对程序逻辑的处理。
希望本文所述对大家微信小程序设计有所帮助。
