微信小程序中的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 prototype属性深入介绍
Nov 27 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
详解puppeteer使用代理
Dec 27 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python http接口自动化脚本详解
2018/01/02 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
python实现文件的分割与合并
2019/08/29 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
某公司部分笔试题
2013/11/05 面试题
2014年社区植树节活动方案
2014/02/28 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
如何判断pytorch是否支持GPU加速
2021/06/01 Python