记录最近vant使用遇到的问题

最新推荐文章于 2025-04-03 10:18:39 发布

前端辣么菜

最新推荐文章于 2025-04-03 10:18:39 发布

阅读量1.6k

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45295262/article/details/127211944

版权

vant移动端使用问题记录：
1.vant样式引入问题
不知道为什么，在main.js全局引入样式"vant/lib/index.less在浏览器模拟器中发现有些机型适配有问题，不知道是不是我项目用的amfeFlexible.js适配问题还是什么原因。
比如这个机型就会出现样式没适配，有些单位px没转成rem.
在这里插入图片描述
改成css就没问题。
import “vant/lib/index.css”;

// import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store/index";
// import "vant/lib/index.less"; //引入vant全部样式,有问题
import "vant/lib/index.css"; // 这样可以

2.在在微信内置浏览器中和app中，使用vant上传闪退问题
解决：直接不设置accept接受类型，直接设置成accept:“” ，然后再上传前手动校验文件。

 <div class="upload-demo">
    <van-uploader :max-size="docMaxSize * 1000 * 1024"
                  @oversize="onOversize"
                  accept="" // 设置空
                  v-model="formFileList"
                  :max-count="limit"
                  :after-read="handleUploadForm"
                  :before-delete="formHandleRemove"
                  :before-read="beforeUploadForm"
                  upload-icon="fire-o">
      <slot name='contain'></slot>
    </van-uploader>

3. 小程序通过webView引入H5页面，页面有vant上传，但是调用上传时候会出现闪退到首页的情况
原因剖析
跳转到h5首页的原因是因为，上传事件结束后会调用小程序的onShow事件。onShow事件重新获取链接渲染了。

问题解决
将web-view所在页面的onShow里的逻辑改到onLoad就可以了
参考：

https://blog.youkuaiyun.com/qq_38990451/article/details/121419906?spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-121419906-blog-117893255.pc_relevant_layerdownloadsortv1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-7-121419906-blog-117893255.pc_relevant_layerdownloadsortv1&utm_relevant_index=7