微信小程序中的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的获得各种控件Value的方法
Nov 19 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 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
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
JS event使用方法详解
2008/04/28 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
python使用socket连接远程服务器的方法
2015/04/29 Python
Python封装shell命令实例分析
2015/05/05 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Python使用wxPython实现计算器
2018/01/30 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
五年级音乐教学反思
2014/02/06 职场文书
食品安全工作方案
2014/05/07 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
海底两万里读书笔记
2015/06/26 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
高三化学教学反思
2016/02/22 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
vue 自定义组件添加原生事件
2022/04/21 Vue.js
Nginx利用Logrotate实现日志分割
2022/05/20 Servers