微信小程序 教程之wxapp视图容器 swiper


Posted in Javascript onOctober 19, 2016

相关文章:

  1. 微信小程序 教程之wxapp视图容器 swiper
  2. 微信小程序 教程之wxapp视图容器 scroll-view
  3. 微信小程序 教程之wxapp 视图容器 view

微信小程序视图容器:swiper

​滑动面板

​滑动面板

属性名 类型 默认值 说明
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-item

仅可放置在swiper组件中,宽高自动设置为100%

示例代码:

<swpier indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for-items="{{imgUrls}}">
 <swpier-item>
  <image src="{{item}}" class="slide-image" width="355" height="150"/>
 </swpier-item>
 </block>
</swpier>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
Page({
 data: {
 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: false,
 autoplay: false,
 interval: 5000,
 duration: 1000
 },
 changeIndicatorDots: function(e) {
 this.setData({
  indicatorDots: !this.data.indicatorDots
 })
 },
 changeAutoplay: function(e) {
 this.setData({
  autoplay: !this.data.autoplay
 })
 },
 intervalChange: function(e) {
 this.setData({
  interval: e.detail.value
 })
 },
 durationChange: function(e) {
 this.setData({
  duration: e.detail.value
 })
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
json传值以及ajax接收详解
May 24 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 #Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 #Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 #Javascript
使用Angular.js开发的注意事项
Oct 19 #Javascript
js表单登陆验证示例
Oct 19 #Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 #Javascript
Angular和百度地图的结合实例代码
Oct 19 #Javascript
You might like
PHP之COOKIE支持详解
2010/09/20 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
浅谈php://filter的妙用
2019/03/05 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
actionscript与javascript的区别
2011/05/25 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
HTML5标签小集
2011/08/02 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
应届生财务会计求职信
2013/11/05 职场文书
作文批改评语大全
2014/04/23 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
工地材料员岗位职责
2015/04/11 职场文书
结婚典礼主持词
2015/06/29 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
月考总结与反思
2015/10/22 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js