【uni-app】 實現自定義輪播圖 【數字膠囊】

官網：https://uniapp.dcloud.io/component/swiper

效果圖：

<view class="swiper">
    <swiper :interval="3000" :duration="1000" :indicator-dots="false"
     :current="topSwiperIndex" @change="topSwiperTab">
        <swiper-item v-for="(item,index) in topSwiper" :key="index">
            <view class="swiper-item">
                <image :src="item.src" mode="aspectFill"></image>
            </view>
        </swiper-item>
    </swiper>

    <!-- 自定義指示點dots -->
    <view class="dots">
        <text>{{topSwiperIndex+1}}/{{topSwiper.length}}</text>
    </view>
</view>

data() {
    return {
        topSwiperIndex: 0,
        topSwiper: [
            {
                src: require('../../static/images/1.jpg')
            },
            {
                src: require('../../static/images/1.jpg')
            },
            {
                src: require('../../static/images/1.jpg')
            },
            {
                src: require('../../static/images/1.jpg')
            },
            {
                src: require('../../static/images/1.jpg')
            }
        ] 
    };
},

methods:{
    topSwiperTab(e) {
        var that = this;
        this.topSwiperIndex = Number(e.target.current);
    }
}

注：swiper輪播圖的默認高度是150px,通常我們的輪播圖片高度不是這個。

解決辦法：

指定swiper標簽的寬高，然后在指定image圖片的寬高,注意設置image圖片的mode屬性值為mode="aspectFill"

swiper{
    width: 100%;
    height: 777.17rpx;
    
    swiper-item{

        image {
            width: 100%;
            height: 781.7rpx;
            display: block;
        }
    }
}

參考：
uni-app 修改swiper的dot 樣式