圖片輪播是很經常用到的效果，小(xiǎo)程度裏默認提供了swiper組件，不過并沒有左右切換的按鈕/箭頭，這裏探讨一(yī)下(xià)如何實現該功能。

一(yī)、靜态數據

先開(kāi)發預覽版本，數據全部用的js設定好的本地數據，實現方式如下(xià)：

<view class=swiper-car>
    <swiper current={{carIndex}} indicator-dots="{{swiperCar.indicatorDots}}" autoplay="{{swiperCar.autoplay}}" interval="{{swiperCar.interval}}" duration="{{swiperCar.duration}}">
        <block wx:for="{{carImgs}}" wx:key="cidx">
            <swiper-item>
                <image src="{{item}}" class="slide-image" />
                </view>
            </swiper-item>
        </block>
    </swiper>
    <button class=swiper-left bindtap="bindPrev">
        <image src=../../images/swiper-prev.png mode=widthFix></image>
    </button>
    <button class=swiper-right bindtap="bindNext">
        <image src=../../images/swiper-next.png mode=widthFix></image>
    </button>
</view>

wxss

.swiper-car {
    height: 430rpx;
    padding: 0 82rpx;
    position: relative;
}
.swiper-car swiper {
    height: 450rpx;
}
.swiper-car swiper-item {
    font-size: 11pt;
}
.swiper-car swiper-item image {
    height: 300rpx;
}
.swiper-car button {
    width: 35rpx;
    height: 65rpx;
    padding: 0;
    position: absolute;
    top: 50%;
    margin-top: -30rpx;
    border: 0;
    background: transparent;
}
.swiper-car button::after {
    border: 0;
}
.swiper-car button image {
    width: 35rpx;
}
.swiper-car .swiper-left {
    left: 25rpx;
    text-align: left;
}
.swiper-car .swiper-right {
    right: 25rpx;
}

實現方式跟網頁端的輪播類似。

二、動态數據

上一(yī)個例子數據是直接在js裏給定，很奇怪的是更換成遠程獲取的數據，setData後發現圖片竟然無法顯示了，後面發現是swiper不能在嵌套裏的關系(?)，移出view就可以了，但是之前的樣式無論如何都不起作用了。
剛好swiper上面有個heading,就将左右箭頭放(fàng)在heading裏，再調整下(xià)位置

.heading {
    margin-top: 40rpx;
    padding: 15rpx;
    background: #fff;
    font-size: 11pt;
    font-weight: bold;
    color: #000;
    position: relative;
}
.heading .arrow {
    width: 30rpx;
    height: 59rpx;
    z-index: 99;
    padding: 80px 20rpx;
}
.heading .swiper-left {
    position: absolute;
    left: 0;
    top: 290rpx;
    transform: translate(0, -50%);
    cursor: pointer;
}
.heading .swiper-right {
    position: absolute;
    right: 0;
    top: 290rpx;
    transform: translate(0, -50%);
}