小程序轮播图代码,微信小程序轮播图开发文档
2018-01-12
导读：轮播图是小程序中很重要的一个组件，对于开发小程序来说，要如何做呢，如下：...
轮播图是小程序中很重要的一个组件，对于开发小程序来说，要如何做呢，如下：
使用微信提供的swiper控件，在页面wxml中添加控件
<view class="page-body">
<view class="page-section page-section-spacing swiper">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<image src='{{item.url}}' class='slide-image' mode='aspectFill' ></image>
</swiper-item>
</block>
</swiper>
</view>
在wxss中设置样式
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
在js 中设置数据
data: {
background:[
{url:'../../images/banner/banner1.jpeg'},
{ url: '../../images/banner/banner2.png' },
{ url: '../../images/banner/banner3.png' },
],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 2000,
duration: 500
},
就这么简单，轮播图就出现了，是不是很简单呢。
第二部分：如何开通一个小商店
扫码免费领取运营资料包
