vant遇到van-sidebar数据超出不能滑动的问题

目录
  • van-sidebar数据超出不能滑动
    • 解决方法
  • 最近项目中使用vant的一些总结
    • List 列表
    • vant一些内置api也很好用
    • vant中的toast等代码形式的样式需要额外引入
    • DatetimePicker 时间选择器
    • Slider 滑块

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 滑块

其中有一个选项可以实现双滑块很舒服

妈妈再也不让我写原生了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

    1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动 说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正常滑动,在安卓手机 上不能上下滑动:这现象并不是ios和安卓兼容性问题! 原因:设置了touch-action: none;这属性为局部或者全局属性,将这条属性注释即可正常滑动. 2.使用PullRefresh和List列表实现下拉刷新和上拉加载时出现的问题 问题1. 下拉刷新时在手机上,不论滑到任何位置,只要下拉就刷新 原因:滑

  • 解决vant中 tab栏遇到的坑 van-tabs

    话不多说,先看下问题描述: 我的需求:(和头条的tab栏类似 ,单击查看头条tab栏) 点击tab栏,下方展示出来当前tab栏下的内容列表(A页面),点击列表进入详情内容(B页面),但是返回(A页面)的时候,需要显示刚才被点击的tab栏高亮显示.(如果tab栏横向有滚动条,那也得让被选中的高亮显示). 所以,大部分人的解决办法就是将当前选中的tab的索引缓存起来,等回到该页面的时候,让被缓存的那个高亮显示出来. 坑的问题在于:van-tabs,里面的v-model默认值是0,但是类型却写着 nu

  • vant 中van-list的用法说明

    van-list里面的元素不能有float样式,否则会连续触发 load 事件 原代码 <template> <div class="about"> <van-tabs v-model="active" sticky @change="getTypeDate"> <van-tab v-for="(tab) in typeList" :title="tab.name"

  • vant遇到van-sidebar数据超出不能滑动的问题

    vant遇到van-sidebar数据超出不能滑动的问题

    目录 van-sidebar数据超出不能滑动 解决方法 最近项目中使用vant的一些总结 List 列表 vant一些内置api也很好用 vant中的toast等代码形式的样式需要额外引入 DatetimePicker 时间选择器 Slider 滑块 van-sidebar数据超出不能滑动 问题:项目中使用了van-popup弹出层加载子组件内容,子组件使用了van-sidebar侧边导航 解决方法 lock-scroll:是否锁定背景滚动 <van-popup v-model="show

  • vuejs数据超出单行显示更多，点击展开剩余数据实例

    vuejs数据超出单行显示更多，点击展开剩余数据实例

    说下我在工作中遇到的这个需求 1:页面上的菜单选项,选项内容是后台接口返回的数据,现在的需求是当选项的内容超出一行,在这行的右面显示更多,点击更多,显示剩下的选项的内容 看下效果图 这是展开的效果图 下面先看下我的html部分代码 <div :class="bussinessType?'show':'hidde'"> <dl> <dt>业务类型:</dt> <dd ref="bussinessTypeRef"&g

  • ECharts实现数据超出Y轴最大值max但不隐藏

    目录 需求 先翻翻文档 yAxis series.Line 解决方案 完整代码 需求 Y轴必须有最大值,我的折线图的数据可能会超过这个最大值,但是!我需要让他的刻度显示在最大值的位置但是提示框显示的是原来的值. 如下图: 先翻翻文档 yAxis 好家伙,不看不知道一看吓一跳,光 Y 轴的 第一层配置就三十几项.不过好在现在我们不需要关注其他的,找找与数值范围限制的相关属性吧: min:设置 y 轴刻度最小值,默认是 小于等于所有数据最小值 的值,具体根据刻度单位进行计算:手动设置后,小于该值的部

  • docker 数据卷之进阶篇

    笔者在<Docker 基础 : 数据管理>一文中介绍了 docker 数据卷(volume) 的基本用法.随着使用的深入,笔者对 docker 数据卷的理解与认识也在不断的增强.本文将在前文的基础上介绍 docker 数据卷的原理及一些高级用法.如果您想先了解 docker 数据卷的基本概念与用法,请先移步这里. 为什么需要数据卷? 这得从 docker 容器的文件系统说起.出于效率等一系列原因,docker 容器的文件系统在宿主机上存在的方式很复杂,这会带来下面几个问题: 不能在宿主机上很方

  • Python整数与Numpy数据溢出问题解决

    Python整数与Numpy数据溢出问题解决

    某位 A 同学发了我一张截图,问为何结果中出现了负数? 看了图,我第一感觉就是数据溢出了.数据超出能表示的最大值,就会出现奇奇怪怪的结果. 然后,他继续发了张图,内容是 print(100000*208378),就是直接打印上图的 E[0]*G[0],结果是 20837800000,这是个正确的结果. 所以新的问题是:如果说上图的数据溢出了,为何直接相乘的数却没有溢出? 由于我一直忽视数据的表示规则(整型的上限是多少?),而且对 Numpy 了解不多,还错看了图中结果,误以为每一个数据都是错误的

  • 关于实现Vue3版抖音滑动插件踩坑指南

    目录 起步 调研 实现思路 工程构建 代码实现 video实现 slide.vue 组合使用 视频自动播放问题 git地址 总结 起步 年前单位需要搞一个类似抖音的需求,这本应是客户端的任务,然而,不知天高地厚的我却接了下来,然而下细致调研之下,发现网上并没有成熟的方案,但是却又很多需求,各大论坛全是提问的帖子,却少有人回答和解决. 这一瞬间,俺慌了,毕竟单位的活,排期都是定死的,这时候临阵退缩,实乃下下策.于是只能撸起袖子加油干.毕竟自己揽的事,含着泪也要干完,这就是男人,一个吐沫一个钉! 调

  • RecyclerView中监听EditText变化的BUG的解决方法

    需求:有一个列表,列表中有一个edittext(只能输整形),外部有一个整形变量Int,每次改变列表中其中一项的edittext的值时,外部的Int都会改变. 既然这样,我们就需要对edittext进行addTextChangedListener监听,一般做法是在afterTextChanged中对外部进行循环累加,但是想想,每一次你改变edittext都要进行一次时间复杂度为n的循环的话,想想就觉得这个算法很那啥,所以我想了另一个算法,每次改变其中一个item的值时,用总的值减去原item的e

  • Recycleview实现无限自动轮播

    概述 RecycleView实现特定数据无限重复滑动在我看来不外乎有两种方法 1.修改adpter的复用机制,无限复用数据 2.在adpter中返回数据长度返回Integer的最大值 由于第一种虽然能实现数据的无限重复但是数据位还是没有任何变化,所以在自动跳转至最后的时候无法在向下一位轮播,所以在这里我使用第二种方式实现自动轮播 简单讲述修改adpter的复用机制 我们拿LinearLayoutManager线性的为例子,我们只需要重新LinearLayoutManager在绘制的时候做一些手手

  • 嵌入式C程序优质编写全面教程规范

    嵌入式C程序优质编写全面教程规范

    目录 摘要: 1. 简介 2. C语言特性 2.1处处都是陷阱 2.1.1 无心之过 2.1.2 数组下标 2.1.3 容易被忽略的break关键字 2.1.4 意想不到的八进制 2.1.5 指针加减运算 2.1.6 关键字sizeof 2.1.7 增量运算符’++’和减量运算符’—‘ 2.1.8 逻辑与’&&’和逻辑或’||’的陷阱 2.1.9 结构体的填充 2.2 不可轻视的优先级 2.3 隐式转换 3. 编译器 3.1 不能简单的认为是个工具 3.2 不能依赖编译器的语义检查 3.2

  • iOS10适配问题及解决方法 新鲜出炉!

    iOS10适配问题及解决方法 新鲜出炉!

    随着iOS10发布的临近,大家的App都需要适配iOS10,下面是我总结的一些关于iOS10适配方面的问题,如果有错误,欢迎指出. 1.系统判断方法失效: 在你的项目中,当需要判断系统版本的话,不要使用下面的方法: 复制代码 代码如下: #define isiOS10 ([[[[UIDevice currentDevice] systemVersion] substringToIndex:1] intValue]>=10) 它会永远返回NO,substringToIndex:1在iOS 10 会

随机推荐