<template>
<div class="examinePlan-content">
<van-swipe class="swipe-box"
ref="swipe"
:loop="false"
:width="swipeWidth"
:show-indicators="false"
:active-index="activeIndex"
@change="handleChange">
<van-swipe-item v-for="n in 9" :key="n">
<div class="swipe-item-box">{{ n }}</div>
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: 0,
swipeWidth: 300
};
},
methods: {
handleChange(index) {
this.activeIndex = index;
}
}
};
</script>
<style scoped>
.swipe-box .van-swipe-item {
background: transparent;
}
.swipe-box .van-swipe-item .swipe-item-box {
background: #fff;
height: 100%;
margin-right: 10px;
}
</style>
这个问题的关键在于,`van-swipe` 组件的设计是让所有的 `van-swipe-item` 共享同一个 `width`,这就导致了当我们给 `van-swipe-item` 添加 `margin` 时,`van-swipe-item` 的内容会被遮住。
解决这个问题的一个方法是,我们可以在每个 `van-swipe-item` 内部添加一个新的元素(例如,一个 `div`),然后将 `margin` 应用到这个新的元素上,而不是直接应用到 `van-swipe-item` 上。这样,`van-swipe-item` 的内容就不会被遮住了