实现效果:
实现代码:
<view class="swiper-container">
<view class="swiper-container__box">
<scroll-view scroll-x>
<block v-for="item in 100" style="" :key="item">
<view class="image-box" style="border:1px solid green;">
<image src="/static/api.png" style="width: 100%;height: 100%;"></image>
</view>
</block>
</scroll-view>
</view>
</view>
<style lang="scss">
.swiper-container {
.swiper-container__box {
box-sizing: border-box;
border:1px solid red;
width:100%;
white-space: nowrap; // 横向滚动必要属性
.image-box {
display: inline-block; // 图片的外层定义成行内元素才可进行滚动
width:100px;
height:100px;
border:1px solid green;
image {
width:100%;
height:100%;
}
}
}
// block 是必须定义的外层元素,否则无法进行横向滚动
}
</style>