问题一：v-for遍历本地图片不显示，用require处理（目前了解是文件路径的问题造成的）
问题二：弹出层的轮播图执行完成后不会从头再开始执行，例如三张图片，首此打开第一张，打开后滑动到第三张，再次打开轮播图显示第一张图而非第三张，使用v-if进行轮播图元素渲染（目前了解是框架采用v-show进行渲染，只是显示隐藏，没有所谓的重置效果）
代码如下：
<template>
<div class="home">
<!-- 国家级证书h5 -->
<div class="national_h5 national">
<div class="internation_national" @click="nation_clickMore">
<p>国家级证书</p>
<van-icon name="arrow-down" />
</div>
<div v-show="shownation" class="national_list">
<!-- 图一 -->
<van-cell @click="showPopup31" class="national_img">
<img src="../assets/ls_55.jpeg" alt />
</van-cell>
<!-- 弹出层-->
<van-popup v-model="flag31" class="national_detail">
<!-- 问题二，多加v-if-->
<van-swipe v-if="flag31" class="my-swipe" indicator-color="white" initial-swipe="0">
<template>
<van-swipe-item v-for="(item,index) in chee" :key="index">
<img :src="item.img" alt />
</van-swipe-item>
</template>
</van-swipe>
</van-popup>
<!-- 图二 -->
<van-cell @click="showPopup32(1)" class="national_img">
<img src="../assets/ls_56.jpeg" alt />
</van-cell>
<van-popup v-model="flag32" class="national_detail">
<van-swipe v-if="flag32" class="my-swipe" indicator-color="white" initial-swipe="1">
<template>
<van-swipe-item v-for="(item,index) in chee" :key="index">
<img :src="item.img" alt />
</van-swipe-item>
</template>
</van-swipe>
</van-popup>
<div class="national_lists">
<!-- 图三 -->
<van-cell @click="showPopup33(2)" class="national_img">
<img src="../assets/ls_57.jpeg" alt />
</van-cell>
<van-popup v-model="flag33" class="national_detail">
<van-swipe v-if="flag33" class="my-swipe" indicator-color="white" initial-swipe="2">
<template>
<van-swipe-item v-for="(item,index) in chee" :key="index">
<img :src="item.img" alt />
</van-swipe-item>
</template>
</van-swipe>
</van-popup>
</div>
</div>
</div>
</div>
</template>
export default {
name: "home",
data() {
return {
flag31: false,
flag32: false,
flag33: false,
shownation: false,
chee: [
//问题一
{ img: require("../assets/ls_55.jpeg") },
{ img: require("../assets/ls_56.jpeg") },
{ img: require("../assets/ls_57.jpeg") }
]
};
},
methods: {
//国家
nation_clickMore() {
this.shownation = !this.shownation;
},
showPopup31() {
this.flag31 = true;
},
showPopup32() {
this.flag32 = true;
},
showPopup33() {
this.flag33 = true;
}
}
};