微信小程序 开发之滑块视图容器(swiper)详解及实例代码


Posted in Javascript onFebruary 22, 2017

微信小程序 开发之滑块视图容器详解

实现效果图:

微信小程序 开发之滑块视图容器(swiper)详解及实例代码

实现起来特别简单,看看代码是怎么写的呢:

<swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:for-index="index">
  <swiper-item>
   <image src="{{item}}" class="side-img"></image>
  </swiper-item>
 </block>
</swiper>

这就是布局了,看一下js里面代码:

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],
    indcatorDots: true,
    autoPlay: true,
    interval: 5000,
    duration: 500
  },

,swiper有以下一些常用属性:

微信小程序 开发之滑块视图容器(swiper)详解及实例代码

标记的两个属性暂时不管。

注意:其中只可放置组件,否则会导致未定义的行为。

swiper-item

仅可放置在组件中,宽高自动设置为100%。

就是这样,自己动手试试。

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

Javascript 相关文章推荐
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
js禁止表单重复提交
Aug 29 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 #Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 #Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 #Javascript
js实现无缝滚动图
Feb 22 #Javascript
JavaScript实现二分查找实例代码
Feb 22 #Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 #Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 #Javascript
You might like
2021年最新CPU天梯图
2021/03/04 数码科技
用php+mysql一个名片库程序
2006/10/09 PHP
用header 发送cookie的php代码
2007/03/16 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
[JS]点出统计器
2020/10/11 Javascript
获取Javscript执行函数名称的方法
2006/12/22 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
深入解析Python中的线程同步方法
2016/06/14 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
tensorflow 查看梯度方式
2020/02/04 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
培训科主任岗位职责
2014/08/08 职场文书
爱的教育观后感
2015/06/17 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏