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

更新时间：2016年11月16日 11:52:27 作者：dzp_coder

这篇文章主要介绍了微信小程序 swiper组件轮播图详解及实例的相关资料,需要的朋友可以参考下

微信小程序 swiper组件轮播图

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

上图就是一个简易的轮播图,是不是很简易.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>

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

微信小程序开发的循环用到了<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函数式编程，文章有介绍函数自核，声明式和命令式代码，感兴趣的小伙伴可以一起来阅读下面我文章内容
2021-09-09
深入理解函数执行上下文 this
这篇文章主要为大家介绍了深入理解函数执行上下文 this示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
TypeScript新语法之infer extends示例详解
这篇文章主要为大家介绍了TypeScript新语法之infer extends示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
关于前端JavaScript ES6详情
这篇文章主要介绍了关于前端JavaScript中的ES6，ES6是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017语法标准，ES6新特性目前只有在一些较新版本浏览器得到支持，老版本浏览器里面运行我们需要将ES6转换为ES5
2021-10-10
微信小程序使用canvas制作K线实例详解
这篇文章主要介绍了微信小程序使用canvas制作K线实例详解的相关资料,需要的朋友可以参考下
2017-01-01
Three.js Interpolant实现动画插值
这篇文章主要为大家介绍了Three.js Interpolant实现动画插值示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
常用的前端JavaScript方法封装
这篇文章主要向大家介绍的是一些常用的前端JavaScript方法封装，数组去重、字符串去重、深拷贝浅拷贝、reverse底层原理和扩展、圣杯模式的继承等多个方法,需要的朋友可以阅读下文的具体内容
2021-09-09
微信小程序地图map详解及简单实例
这篇文章主要介绍了微信小程序地图map详解及简单实例的相关资料,需要的朋友可以参考下
2017-01-01
微信浏览器禁止页面下拉查看网址实例详解
这篇文章主要介绍了微信浏览器禁止页面下拉查看网址实例详解的相关资料,需要的朋友可以参考下
2017-06-06
本地搭建微信小程序服务器的实现方法
这篇文章主要介绍了本地搭建微信小程序服务器的实现方法的相关资料,希望通过本文能帮助到大家，让大家轻松的搭建自己的微信小程序的服务器，需要的朋友可以参考下
2017-10-10