微信小程序 教程之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 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
jQuery的文档处理程序详解
May 10 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
vue实现虚拟列表功能的代码
Jul 28 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
example2.php
2006/10/09 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
python版本单链表实现代码
2018/09/28 Python
python构建基础的爬虫教学
2018/12/23 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
美国牛仔品牌:True Religion
2018/11/16 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
如何清空Session
2015/02/23 面试题
法律进学校实施方案
2014/03/15 职场文书
安全生产承诺书
2014/03/26 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
2019求职信大礼包
2019/05/15 职场文书
python获取字符串中的email
2022/03/31 Python