发布于 2017-07-21 12:53:59 | 182 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的微信小程序入门,程序狗速度看过来!

小程序 微信小程序

微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。


这篇文章主要介绍了微信小程序 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没啥区别.

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



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务