圖片輪播是(yes)很經常用(use)到(arrive)的(of)效果，小程度裏默認提供了(Got it)swiper組件，不(No)過并沒有左右切換的(of)按鈕/箭頭，這(this)裏探讨一(one)下如何實現該功能。

一(one)、靜态數據

先開發預覽版本，數據全部用(use)的(of)js設定好的(of)本地(land)數據，實現方式如下：

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

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

二、動态數據

上一(one)個(indivual)例子數據是(yes)直接在(exist)js裏給定，很奇怪的(of)是(yes)更換成遠程獲取的(of)數據，setData後發現圖片竟然無法顯示了(Got it)，後面發現是(yes)swiper不(No)能在(exist)嵌套裏的(of)關系(?)，移出(out)view就可以(by)了(Got it)，但是(yes)之前的(of)樣式無論如何都不(No)起作(do)用(use)了(Got it)。
剛好swiper上面有個(indivual)heading,就将左右箭頭放在(exist)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%);
}