微信小程序 教程之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 相关文章推荐
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
JavaScript数组方法总结分析
May 06 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
如何学习Javascript入门指导
2013/11/01 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
Python实现基本线性数据结构
2016/08/22 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
大课间活动制度
2014/01/18 职场文书
党建工作先进材料
2014/05/02 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
毕业设计论文评语
2014/12/31 职场文书
新闻稿格式范文
2015/07/18 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
Python基础 括号()[]{}的详解
2021/11/07 Python
Python与C++中梯度方向直方图的实现
2022/03/17 Python