微信小程序 swiper组件轮播图详解及实例


Posted in Javascript onNovember 16, 2016

微信小程序 swiper组件轮播图

 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图.

微信小程序 swiper组件轮播图详解及实例

上图就是一个简易的轮播图,是不是很简易.23333

主要是代码也很简单.

1.index.wxml

<!--index.wxml-->  
  <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
   <block wx:for="{{movies}}" wx:for-index="index">  
    <swiper-item>  
     <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
    </swiper-item>  
   </block>  
  </swiper>

这里有几个属性需要说明.

微信小程序 swiper组件轮播图详解及实例

微信小程序开发的循环用到了<block wx:for >

我这里是遍历movies[]数组.<swiper-item>就是item

2.index.js

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
 data: {  
  movies:[  
  {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,  
  {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,  
  {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,  
  {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}   
  ]  
 },  
 onLoad: function () {  
 }  
})

3.WXML

/**index.wxss**/
.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}

WXSS不多说,跟CSS没啥区别.

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

Javascript 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
input框中的name和id的区别
Nov 16 #Javascript
微信小程序 页面传参实例详解
Nov 16 #Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 #Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 #Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 #Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 #Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 #Javascript
You might like
PHP数据类型的总结分析
2013/06/13 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
js几个验证函数代码
2010/03/25 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
详解AngularJS 过滤器的使用
2018/06/02 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
优秀毕业大学生推荐信
2013/11/13 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
军训考核自我鉴定
2014/02/13 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL