轮播效果
先给大家看一下轮播效果:
效果实现
废话少说,我们先来上代码~
wxml:
<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="{{item}}">
<swiper-item class="swiper-item">
<image src="{{item}}" class="slide-image" width="100%"/>
</swiper-item>
</block>
</swiper>
wxs:
Page({
data: {
currentCity: '',
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: true,
interval: 4000,
duration: 1000,
circular: true
}
})
这样我们就可以看见,轮播效果已经出来了。
*注 swiper 中只可放置 swiper-item 组件,否则会导致未定义的行为。
对swiper不太了解的同学们可以看一下下面的官方文档
点这里点这里
不难发现,目前为止只是在iPhone 5 上完成了,当我们切换到其他模拟器上,你就会发现,图片横向并不能充满全局,接下来说一下优化方案
优化方法
依旧先上代码~
wxss:
.swiper{
width: 100%;
height: 150px;
}
.swiper-item image{
width: 100%;
}
这里我们让图片自动充满横屏
到现在我们的轮播功能也就完成了