微信小程序中的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
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
JS实现的几个常用算法
Nov 12 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
js指定步长实现单方向匀速运动
Jul 17 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
深入解析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
Laravel重写用户登录简单示例
2016/10/08 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
JS实现数组的增删改查操作示例
2018/08/29 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
Python入门_条件控制(详解)
2017/05/16 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Python笔记之facade模式
2019/11/20 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
Java面试笔试题大全
2016/11/23 面试题
创建无烟单位实施方案
2014/03/29 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
python实现过滤敏感词
2021/05/08 Python
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang