vant遇到van-sidebar数据超出不能滑动的问题
更新时间：2022年04月25日 16:16:18 作者：船长在船上
这篇文章主要介绍了vant遇到van-sidebar数据超出不能滑动的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
van-sidebar数据超出不能滑动
问题：项目中使用了van-popup弹出层加载子组件内容，子组件使用了van-sidebar侧边导航
解决方法
lock-scroll：是否锁定背景滚动
<van-popup v-model="showLaodingport" position="bottom" :style="{ height: '100%'}" :lock-scroll="false">
//子组件
<loadingPort @child="fromLoadingport"/>
</van-popup>默认是true，设置为false即可。
最近项目中使用vant的一些总结
vantUi是有赞团队开发的一款针对于小程序及手机端的一款UI框架
使用时非常方便 但是其中一些bug也很多 把项目中遇到的坑及小tipes分享一下
供自己记忆同时也分享给大家
好好读文档 好好读文档 好好读文档 !important
List 列表
list列表组件完全是全自动的
自动请求、自动删除loading、页面刷新自动更新。。。
总之在list中你只要做两件事：
- 在请求数据== 数据库数据 时给list一个finished状态
- 填写你所需要的请求函数
重用list导致的bug
在写如上代码时重用list列表 --导致左右击后每次选择条件onload函数会触发两变
bug分析：
由于每次切换当有的页面加载完成后finished状态会改变，
当其重新开启的时候会触发一次onload函数而我们正常来说也会手动触发一次请求数据
所以在每次请求时候判断一下 finished改变的时候就不要重新手动触发onload函数了
如下：
if (this.page) {
sn = 2;
this.listForMaine = [];
this.startAt = 0;
if(this.myFinished){
this.myFinished= false;
hasChanged = true
}
} else {
sn = 1;
this.listForExmation = [];
this.startAtExamtion = 0;
if(this.myExaminationinished){
// changed
this.myExaminationinished= false;
hasChanged = true
}
}
if(!hasChanged){
this.getSourceDate(sn)
}
vant一些内置api也很好用
比如：
通过ref绑定详细请阅读文档
vant中的toast等代码形式的样式需要额外引入
如：
import { Toast } from 'vant';
然后再使用，否则会报错
DatetimePicker 时间选择器
这个组件可以精确到分钟 已经很好用了
Slider 滑块
其中有一个选项可以实现双滑块很舒服
妈妈再也不让我写原生了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue使用vue-cli创建项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了Vue实现文本编译详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助2022-08-08
这篇文章主要介绍了vue中引入第三方字体文件的方法示例，文中讲述了实现方法及其错误的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
vue打包上传服务器加载提示错误Loading chunk {n} failed
这篇文章主要为大家介绍了vue打包上传服务器加载提示错误Loading chunk {n} failed解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
本文主要介绍了vue3+pinia用户信息持久缓存token的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07
Vuex中的映射允许您将state中的任何属性(state、getter、mutation和action)绑定到组件中的计算属性,并直接使用state中的数据，下面我们来详细了解2022-09-09
这篇文章主要介绍了vue路由传参-如何使用encodeURI加密参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue基于Element按钮权限实现方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了vue中对时间戳的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
解决Vue + Echarts 使用markLine标线(precision精度问题)
这篇文章主要介绍了解决Vue + Echarts 使用markLine标线(precision精度问题)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论