<template>
<scroll-view class="scroll-view" scroll-x="true" style="white-space: nowrap;">
<view class="scroll-view-item" v-for="(item, index) in imgList" :key="index">
<image :src="item" class="img"></image>
</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
imgList: [
// 这里填充你的图片链接
'http://example.com/image1.jpg',
'http://example.com/image2.jpg',
// ... 以此类推，至少9张图片
]
}
}
}
</script>
<style>
.scroll-view {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.img {
width: 100%;
display: block;
}
</style>
本文展示了如何使用Vue.js构建一个基本的图片轮播组件，通过``和`
5259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
