圖片輪播是很經(jīng)常用到的效果，小程度里默認提供了swiper組件，不過(guò)并沒(méi)有左右切換的按鈕/箭頭，這里探討一下如何實(shí)現該功能。

一、靜態(tài)數據

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

<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;
}

實(shí)現方式跟網(wǎng)頁(yè)端的輪播類(lèi)似。

二、動(dòng)態(tài)數據

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

.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%);
}