相信大家在平常購物的時候都會看到輪播圖，輪播圖里面播放的是熱門商品的信息。在小程序里面我們可以通過swiper滑動視圖容器組件來實現，讓我們一起來看下swiper組件都有哪些屬性：

我們看到可以通過一些屬性給視圖容器增加一些指示點，這些指示點代表了這些滑塊在容器中的位置。我們也可以設置指示點的顏色或者對當前選中的指示點設置顏色，同時我們也可以通過autoplay這個屬性來設置自動播放輪播圖?，F在讓我們通過一個實例來看下吧：

從圖中我們可以看到，通過<button>組件我們可以設置輪播圖的一些功能：

<!--index.wxml-->

<view>swiper組件</view>

<view class="section">

<view class="page-body">

<view class="page-section page-section-spacing swiper">

<swiper

indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}"

interval="{{interval}}"

duration="{{duration}}"

bindchange="change"

bindanimationfinish="animationfinish"

>

<block wx:for="{{background}}" wx:key="*this">

<swiper-item>

<view class="swiper-item {{item}}"></view>

</swiper-item>

</block>

</swiper>

</view>

<view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">

<view class="weui-cells weui-cells_after-title">

<view class="weui-cell weui-cell_switch">

<view class="weui-cell__bd">指示點</view>

<view class="weui-cell__ft">

<switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />

</view>

</view>

<view class="weui-cell weui-cell_switch">

<view class="weui-cell__bd">自動播放</view>

<view class="weui-cell__ft">

<switch checked="{{autoplay}}" bindchange="changeAutoplay" />

</view>

</view>

</view>

</view>

<view class="page-section page-section-spacing">

<view class="page-section-title">

<text>幻燈片切換時長(ms)</text>

<text class="info">{{duration}}</text>

</view>

<slider bindchange="durationChange" value="{{duration}}" min="500" max="2000" />

<view class="page-section-title">

<text>自動播放間隔時長(ms)</text>

<text class="info">{{interval}}</text>

</view>

<slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000" />

</view>

</view>

</view>

/*index.wxss*/

button {

margin-bottom: 30rpx;

}

button:last-child {

margin-bottom: 0;

}

.page-body {

width: 100%;

}

.page-section-title {

padding: 0;

}

.swiper-item {

display: block;

height: 150px;

}

.page-section-title {

margin-top: 60rpx;

position: relative;

}

.info {

position: absolute;

right: 0;

color: #353535;

font-size: 30rpx;

}

.page-foot {

margin-top: 50rpx;

}

.demo-text-1 {

position: relative;

align-items: center; /*居中對齊各項demo-text-1元素*/

justify-content: center; /*居中排列，周圍留有空白*/

background-color: #1AAD19;

color: #FFFFFF;

font-size: 36rpx;

}

.demo-text-1:before { /*向demo-text-1元素前加入*/

content: 'A';

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.demo-text-2 {

position: relative;

align-items: center;

justify-content: center;

background-color: #2782D7;

color: #FFFFFF;

font-size: 36rpx;

}

.demo-text-2:before {

content: 'B';

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%); /*旋轉元素*/

}

.demo-text-3 {

position: relative;

align-items: center;

justify-content: center;

background-color: #F1F1F1;

color: #353535;

font-size: 36rpx;

}

.demo-text-3:before {

content: 'C';

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

//index.js

Page({

data: {

background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],

indicatorDots: true,

vertical: false,

autoplay: false,

interval: 2000,

duration: 300

},

changeIndicatorDots: function (e) {

console.log('切換指示點開關');

this.setData({

indicatorDots: !this.data.indicatorDots /*!在Javascript中是取反的意思*/

})

},

changeAutoplay: function (e) {

console.log('切換自動播放開關');

this.setData({

autoplay: !this.data.autoplay

})

},

intervalChange: function (e) {

console.log(`調整自動播放間隔時長為: ${e.detail.value}ms`);

this.setData({

interval: e.detail.value /*取值*/

})

},

durationChange: function (e) {

console.log(`調整幻燈片切換時長為: ${e.detail.value}ms`);

this.setData({

duration: e.detail.value

})

},

animationfinish: function(e) {

console.log(e);

},

change: function(e) {

console.log(e);

}

})

今天的內容就到這里了，我們明天見。

總結

以上是生活随笔為你收集整理的swiper鼠标hover停止自动轮播_swiper滑块组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。