vant 踩坑记录
1. 轮播图刷新的时候撑大元素
描述: 使用了图片懒加载, 页面刷新的时候会把轮播图撑大, 图片下方会一一片白屏,等切换到下一图片又恢复正常
原因: 图片懒加载的原因
解决: 不使用图片懒加载, 就用他的基础用法就好
(希望大家能找到更好的方法)
<template>
<div class="carousel" width="100%">
<!-- <van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" width="100%" />
</van-swipe-item>
</van-swipe> -->
<van-swipe :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="item in images">
<img :src="item" alt="" width="100%">
</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
export default {
data() {
return {
images: [
'https://tsplus.zhibocloud.cn/api/v2/files/7837',
'https://tsplus.zhibocloud.cn/api/v2/files/7838',
'https://tsplus.zhibocloud.cn/api/v2/files/19637'
]
}
}
}
</script>
2. ActiveSheet引入报错
描述:
import { ActionSheet } from 'vant';
Vue.use(ActionSheet);
引入这个组件的时候报错,错误消息
捕获.PNG
解决方法: 找到node_modules/vant/es/actionsheet
把actionsheet 改成 action-sheet
我试过1.6.23,1.6.22,1.6.21都是这样，不知道最新版有没有问题。
3. ActiveSheet引入无效
解决方法:
<van-action-sheet>把这个改成<van-actionsheet>
