廣告輪播圖幾乎每個小程序都會用到的,所以有必要講解一下,老規(guī)矩,先看效果圖,其實(shí)不看我相信大家也都知道,拿出來講就是讓大家熟悉一下小程序基礎(chǔ)控件swiper的屬性
效果圖.gif
swiper屬性介紹
屬性名 | 作用 | 參數(shù)值 |
---|---|---|
indicator-dots | 是否顯示面板指示點(diǎn) | true/false 默認(rèn)是false |
indicator-color | 指示點(diǎn)顏色 | 默認(rèn)值rgba(0, 0, 0, .3) |
indicator-active-color | 當(dāng)前選中的指示點(diǎn)顏色 | 默認(rèn)顏色#000000 |
autoplay | 是否自動切換 | true/false 默認(rèn)是false |
interval | 自動切換時間間隔 | number 默認(rèn)是5000 |
duration | 滑動動畫時長 | number 默認(rèn)是500 |
vertical | 滑動方向是否為縱向 | true/false 默認(rèn)是false |
bindchange | current 改變時會觸發(fā) change 事件,event.detail = {current: current, source: source} |
廣告輪播圖效果的實(shí)現(xiàn)
一、wxml界面的實(shí)現(xiàn)
<view class='title-line'>swiper</view>
<!-- banner -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" vertical="{{isVertical}}" duration="{{duration}}" circular='false'>
<swiper-item wx:for="{{imgUrls}}">
<image src="{{item}}" />
</swiper-item>
</swiper>
滑動進(jìn)度條控制滾動過度時間
<slider bindchange="durationChange" show-value min="500" max="2000"/>
<view class='line'></view>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" vertical="{{true}}" duration="{{duration}}" circular='true'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" />
</swiper-item>
</block>
</swiper>
界面實(shí)現(xiàn)簡單,運(yùn)用小程序封裝的控件swipe就可以輕松實(shí)現(xiàn),為了對比效果,我生成了兩個廣告輪播圖,一個是橫行滾動,一個是縱向滾動
二、xxx.js屬性的控制
Page({
data: {
// banner
imgUrls: [
'http://7xnmrr.com1.z0.glb.clouddn.com/red.png',
'http://7xnmrr.com1.z0.glb.clouddn.com/yellow.png',
'http://7xnmrr.com1.z0.glb.clouddn.com/green.png'
],
indicatorDots: true, //是否顯示面板指示點(diǎn)
autoplay: true, //是否自動切換
interval: 3000, //自動切換時間間隔,3s
duration: 1000, // 滑動動畫時長1s
},
durationChange:function(e)
{
this.setData({
duration: e.detail.value
})
},
js中的屬性我都在代碼中注釋了,想要更改屬性,直接修改對應(yīng)的值就好,durationChange是用來控制滑動動畫時長的,通過滑動進(jìn)度條即可
三、wxss樣式
* 直接設(shè)置swiper屬性 */
swiper {
height: 400rpx;
}
swiper-item image {
width: 100%;
height: 100%;
}
別小看這幾行代碼,代碼君之前為了設(shè)置輪播圖從滿屏幕,找了好久,才設(shè)置成功的,一般使用的時候,把上面代碼拷貝進(jìn)去就行,頂多去設(shè)置一下swiper的高度
總結(jié)
今天周五,所以講解的內(nèi)容也比較少,相信大家看一遍,大概就學(xué)的差不多啦,最后祝大家周末愉快~