微信小程序 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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
JavaScript数组操作详解
Feb 04 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
详解react阻止无效重渲染的多种方式
Dec 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
PHP新手上路(二)
2006/10/09 PHP
实用函数8
2007/11/08 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
centos系统升级python 2.7.3
2014/07/03 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python输出pdf文档的实例
2020/02/13 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
《生命 生命》教学反思
2014/04/19 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
vue组件vue-esign实现电子签名
2022/04/21 Vue.js