微信小程序中的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 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
JavaScript实现移动端拖动元素
Nov 24 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&amp;mysql(五)
2006/10/09 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python字典一键多值实例代码分享
2019/06/14 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
会计辞职信范文
2014/01/15 职场文书
医院总经理岗位职责
2014/02/04 职场文书
学习雷锋倡议书
2014/04/15 职场文书
公司经理任命书
2014/06/05 职场文书
初中信息技术教学计划
2015/01/22 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
网络研修随笔感言
2015/11/18 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python