mpvue使用scroll-view實現圖片橫向滑動

html代碼

<div class="swiper-home">
            <scroll-view scroll-x="true" style="width: 100%">
                <view class="swiper-item" v-for="(item,index) in imgUrls" :key="index" >
                    <img :src="item">
                </view>
            </scroll-view>
        </div>

js的話，就一個數組，里面存圖片地址

css代碼

.swiper-home{
        width: 100%;
        height: 162rpx;
        box-sizing: border-box;
        display: flex;
        white-space: nowrap;//這個屬性很重要
        .swiper-item{
            width: 216rpx;
            height: 100%;
            display: inline-block;
        }
        img{
            max-width: 100%;
            max-height: 100%;
        }
    }