小程序輪播圖代碼,微信小程序輪播圖開發文檔
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
},
就這么簡單，輪播圖就出現了，是不是很簡單呢。
第二部分：如何開通一個小商店
掃碼免費領取運營資料包
