微信小程序轮播图

微信小程序 swiper组件轮播图

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

image

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

主要是代码也很简单.

1.index.wxml

<pre class="code" style="margin: 10px 0px; padding: 8px 10px 8px 12px; overflow-wrap: break-word; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; border-width: 1px 1px 1px 5px; border-style: solid; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(108, 226, 108); border-image: none 100% / 1 / 0 stretch; background: none 0% 0% repeat scroll rgb(241, 241, 241); font-size: 12px; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<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> </pre>

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

image

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

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

2.index.js

<pre class="code" style="margin: 10px 0px; padding: 8px 10px 8px 12px; overflow-wrap: break-word; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; border-width: 1px 1px 1px 5px; border-style: solid; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(108, 226, 108); border-image: none 100% / 1 / 0 stretch; background: none 0% 0% repeat scroll rgb(241, 241, 241); font-size: 12px; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">//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 () {
}
}) </pre>

3.WXML

<pre class="code" style="margin: 10px 0px; padding: 8px 10px 8px 12px; overflow-wrap: break-word; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; border-width: 1px 1px 1px 5px; border-style: solid; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(108, 226, 108); border-image: none 100% / 1 / 0 stretch; background: none 0% 0% repeat scroll rgb(241, 241, 241); font-size: 12px; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">/index.wxss/
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}

</pre>