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

 

转载于:https://www.cnblogs.com/Mrrabbit/p/9317415.html