微信小程序 教程之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动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 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
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
php常用表单验证类用法实例
2015/06/18 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
使用console进行性能测试
2015/04/27 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
python正则表达式re模块详细介绍
2014/05/29 Python
python素数筛选法浅析
2018/03/19 Python
Python Requests库基本用法示例
2018/08/20 Python
详解python配置虚拟环境
2019/04/08 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
刊首寄语大全
2014/04/11 职场文书
银行自荐信怎么写
2015/03/05 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL