效果图
代码实现
start.wxml
注意:<swiper>不能被view包裹,不然无法出现效果。(我也是试了半天,才在网上找到解决方案。)
<view class="container">
<!-- 轮播图 -->
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" circular="true">
<block wx:for="{{images}}" wx:for-index="index" wx:key="id">
<swiper-item>
<image src="{{item.url}}" class="slide-image" mode="widthFix"/>
</swiper-item>
</block>
</swiper>
</view>
start.js
data: {
images:[
{url:'/images/show/1.jpg'} ,
{url:'/images/show/2.jpg'} ,
{url:'/images/show/3.jpg'} ,
{url:'/images/show/4.jpg'} ,
{url:'/images/show/5.jpg'} ,
{url:'/images/show/6.jpg'} ,
]
},
onLoad: function () {
}
})
start.wxss
.swiper {
position: absolute;
top:0rpx;
height: calc(100vm*365/974);
width: 100%;
}
.swiper image {
width: 100%;
}