微信小程序中的swiper组件详解


Posted in Javascript onApril 14, 2017

微信小程序中的swiper组件

微信小程序中的swiper组件真的是简单方便

提供了页面中图片文字等滑动的效果

<swiper>
  <swiper-item></swiper-item>
  <swiper-item></swiper-item>
  <swiper-item></swiper-item>
</swiper>

这里的就是一个滑块视图容器;而就是你希望滑动的东西,可以是文字也可以是image

其中swiper有很多属性。常用的有

  • 属性名                      默认值                        作用
  • indicator-dots         false                         是否显示面板指示点
  • indicator-color        rgba(0, 0, 0, .3)         指示点的颜色
  • indicator-active-color        #000000        当前选中的指示点颜色
  • autoplay                  false                         是否自动播放
  • intervaly                  5000                         自动切换时间间隔 

更多的属性可以去查看微信小程序官方教程

https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

这里vertical=”true”在官方文档中没有提到,定义这个可以上下滑动

还有一点需要注意vertical=”false”时,仍然是上下滑动,原因就是微信小程序在解析时将”false”看成字符串,只要字符串不为空,就为真。所以我们需要这样写:vertical=”{{false}}”

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

Javascript 相关文章推荐
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 #Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 #Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 #Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 #Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 #Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 #Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 #Javascript
You might like
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php二维数组排序详解
2013/11/06 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
在Django的session中使用User对象的方法
2015/07/23 Python
python学习 流程控制语句详解
2016/06/01 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
Python模块搜索路径代码详解
2018/01/29 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
flask项目集成swagger的方法
2020/12/09 Python
python3中for循环踩过的坑记录
2020/12/14 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
日语专业毕业生求职信
2013/12/04 职场文书
服务生自我鉴定
2014/01/22 职场文书
合伙经营协议书范本
2014/09/13 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
工程承包协议书范本
2014/09/29 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
庆元旦主持词
2015/07/06 职场文书