欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

微信小程序 轮播图 swiper图片组件

发布：2018-01-25 15:01浏览： 次来源：网络 作者：tianshu

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

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

主要是代码也很简单.

1.index.wxml

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

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

微信小程序 轮播图 swiper图片组件(图2) 
微信小程序开发的循环用到了<block wx:for >

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

2.index.js
  1. //index.js    
  2. //获取应用实例    
  3. var app = getApp()    
  4. Page({    
  5.   data: {    
  6.     movies:[    
  7.     {url:'https://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,    
  8.     {url:'https://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,    
  9.     {url:'https://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,    
  10.     {url:'https://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}     
  11.     ]    
  12.   },    
  13.   onLoad: function () {    
  14.   }    
  15. })  
3.WXML
/**index.wxss**/
.swiper {
  height: 400rpx;
  width: 100%;
}
.swiper image {
  height: 100%;
  width: 100%;
}
WXSS不多说,跟CSS没啥区别.




免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有