vant-list + toast分页加载,数据加载后会滚动至顶部

2023-11-03

vant-list + toast分页加载,数据加载后会滚动至顶部
主要原因是 toast组件在全局添加了 pointer-event:none
解决办法,在对应的van-list的属性值添加 pointer-event

.volunteer-list {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff !important;
    pointer-events: auto !important;
    * {
        pointer-events: auto !important;
    }
    .list { /**这里是van-list*/
        position: relative;
        width: 100%;
        height: 100%;
        overflow: auto;
        padding: 10px 14px;
        }
   }

这时候会出现一个新的问题,在toast的loading等待时候,页面依旧可以操作
解决办法,在toast上添加伪类遮罩层,全局添加css,并阻止鼠标事件穿透

.van-toast::before {
    content: '';
    display: block;
    position: fixed;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    pointer-events: visiblestroke;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vant-list + toast分页加载,数据加载后会滚动至顶部 的相关文章

  • 使用 SASS 切换用户主题 - Ruby on Rails

    所以我有一个 Rails 管理系统 允许用户选择一个主题 基本上是一组 SASS 颜色变量 它将使用新颜色重新编译 application css scss 当用户从下拉菜单中选择并提交时 更改此设置的最佳方法是什么 我阅读了一些有关缓存和
  • 0 因为饱和度和亮度不起作用,但 0% 在 hsl/hsla 中起作用?

    我正在尝试一个简单的演示 其中我为元素赋予了颜色hsl 根据我的经验 我知道0CSS 中的 ZERO 是无单位的 如果要指定 0 作为值 可以保留单位 然而 情况似乎并非如此hsl hsla 在 Chrome 和 Firefox 上 结果都
  • 向 jQuery 函数 Interval 添加动画

    我的问题是如何向倒计时器添加一些动画 我的意思是每次调用 Function Interval 时都需要添加一些动画 如下所示 youtube 视频链接 https www youtube com watch v A9fnvhcWPRo 第二
  • onMouseEnter 和 onMouseLeave 未按预期运行

    我正在尝试为我的组件模拟悬停效果 然而 onMouseEnter Leave 事件没有按预期工作 现在我试图让它简单地 console log 一个字符串来检查它是否正常工作 但什么也没有发生 目的是我可以在悬停时更改其背景颜色 我尝试通过
  • jQuery hide() 动画向右滑动

    使用 jQuery 的hide 使用可选的持续时间参数的函数 我可以在我的网站上获得一些警报框 以优雅地滑出屏幕并消失 隐藏动画的默认方向似乎是向左滑动 尽管此行为未在hide 定义页 http api jquery com hide 我需
  • 如何让左浮动和右浮动在同一条线上?

    问题 The left part nav ul li which float left and the right part nav search which float right are not in a line it should
  • 使用 jQuery / JavaScript 将 Alpha 通道添加到背景颜色

    我有一个 jQuery 函数 它添加了一个Alpha通道到一个背景颜色当事件发生时 这是我的jsFiddle http jsfiddle net liormb SxQt8 1 CSS div background color rgb 100
  • 始终滚动 div 元素而不是页面本身

    我有一个带有内部的页面布局 div 包含页面上重要内容的元素 设计的重要部分是 content height 300px width 500px overflow scroll 现在 当包含的文本大于 300px 时 我需要能够滚动它 是否
  • 可以在 IE 中的表格行上添加渐变吗?

    当我将鼠标悬停在表格特定部分的表格行上时 我希望背景更改为线性渐变 CSS 很简单 tbody row links tr hover background typical multi browser linear gradient code
  • HTML 嵌入对象具有灰色背景。可以透明吗?

    我使用带有开源插件的 Firefox 来播放视频 视频被 尽可能好地 缩放以适应嵌入对象的宽度和高度中定义的可用空间 但有时右侧和 或底部会有一点灰色边框 看来这不是我的父 div 的背景颜色 因为更改它根本没有效果 这是 HTML div
  • 当缩放元素在缩放之前大于容器时,CSS 变换比例(向下)不会使用 margin 0 auto 将元素居中

    看来 当缩小以前不适合其容器的元素时 margin 0 auto将不再使元素在其父元素中居中 请注意 使用transform origin center center并没有解决这个问题 这是因为自动边距似乎在缩放之前而不是之后应用 我期望后
  • 使用 GD lib 过滤器标准化 CSS 过滤器

    我想让用户拖动范围滑块并通过实时预览 CSS 滤镜 调整图像的亮度和对比度 然后使用 GD 库保存调整 但是 我似乎无法从 CSS 过滤器和 GD lib 亮度和对比度过滤器获得相同的结果 我的 CSS 过滤器范围为 50 150 其中 1
  • CSS Font-Face url 不起作用?

    我在使用 font face 选择器时遇到了一些问题 我有以下问题 font face font family MuseoSans 700 src url http mysite co uk clients reload Images st
  • 背景颜色的不透明度,但不是文本的不透明度[重复]

    这个问题在这里已经有答案了 如何使背景的跨浏览器 包括 Internet Explorer 6 透明div而文本仍然不透明 我需要在不使用任何库 例如 jQuery 等 的情况下完成此操作 但如果您知道有一个库可以实现此目的 我很想知道 这
  • 粘表行

    我正在尝试实现一个像 iOS 那样的日历列表视图 基本上 我现在正在做的就是循环遍历我的事件数组 如果是新日期 则打印日期标题 否则打印日历事件 我想让日期标题行保持粘性 直到它们 滚动走 我怎样才能做到这一点 我看到很多关于粘性标题的示例
  • 混合混合模式:乘法在 Chrome 中不起作用

    我正在尝试使用mix blend mode multiply在 Chrome 上 但它无法按预期工作 当我添加时magenta cyan and yellow在一起它不会给我黑色但brown https i stack imgur com
  • 如何使用 jQuery 在按下按钮后保持按钮处于活动状态

    我见过一些非常相似的问题 但一直无法找到我正在寻找的答案 我已经确定了解决方法 但想知道执行该任务的正确方法 我想要的是单击按钮并使活动状态保持不变 下一次单击将切换状态 这是所需的 我真正需要知道的是如何解决 uiButton activ
  • Mobile Safari (iPhone) CSS 垂直居中/行高 CSS 问题

    有一个问题 我一直试图在各个项目中解决 但运气不佳 我有一些divs 内的文本以 CSS 为中心 使用display block and line height 我也尝试过padding和固定的高度 通常 这些设置要么只是标题 要么有时是按
  • 加载背景图像的图像不显示

    我真的很困惑 我正在尝试创建一个带有图标和一些按钮的登陆页面 但我无法设法使我正在使用的背景图像显示出来 即使它是根据 Chrome 的开发工具包加载的 我只有这些行 索引 html div class row div class tryh
  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整

随机推荐

  • java 简介

    java 简介 1991 年Sun公司的James Gosling 詹姆斯 高斯林 等人开始开发名称为 Oak 的语言 希望用于控制嵌入在有线电视交换盒 PDA等的微处理器 1994年将Oak语言更名为Java 1 java体系结构 j2s
  • C语言笔记 指针 数组

    C语言中 指针做函数参数传递二维数组有两种基本方法 1 传递 数组指针 include
  • Openstack常用命令

    目录 一 创建用户 二 创建删除模板和模板其他操作 三 创建更新删除镜像 四 创建网络 五 VPN的使用 六 创建容器swift模块 前言 在linux中使用openstakc命令前 需要source etc keystone admin
  • 设计模式在开源框架中的应用

    设计模式不是虚的 实实在在出现在很多开源框架中 比如spring tomcat等等 现在这篇文章是一个阅读合集 整理了设计模式在开源框架中的应用 后续会逐渐补充 1 tomcat中设计模式的使用 Tomcat 系统架构与设计模式 第 2 部
  • 最大期望值(EM算法)学习

    20201008 0 引言 提示 本篇文章并没有详细的说明EM算法数学推导 虽然前面通过GMM的例子能够明白大致的思想 但是在底层数学推导部分没有非常完整说明 后续有时间可能会继续添加 如果想知道数学原理的读者 就不要浪费时间再看这篇文章了
  • TCP/IP学习笔记-PPPoE协议

    写在前面 仅供学习使用 PPPoE协议概述 PPPoE是一种把PPP帧封装到以太网帧的链路层协议 所以抓包的时候抓的是以太网协议 PPPoE利用以太网将大量主机组网 不仅具有以太网快速简便的特点还有PPP强大的功能 任何能被PPP封装的协议
  • OLED拼接屏生产流程全解析:关键步骤、注意事项和技术趋势

    OLED拼接屏作为现代商业展示 会议室和指导系统中的重要组成部分 其高亮度 高对比度和逼真的色彩效果备受推崇 然而 要实现一块完美无缝的OLED拼接屏并非易事 本文将深入探讨OLED拼接屏的生产过程 包括关键步骤 注意事项以及当前的技术趋势
  • Spring Cloud Gateway 远程代码执行漏洞(CVE-2022-22947)

    一 漏洞描述 Spring Cloud Gateway 是基于 Spring Framework 和 Spring Boot 构建的网关 它旨在为微服务架构提供一种简单 有效 统一的 API 路由管理方式 3月1日 VMware发布安全公告
  • Linux三剑客(grep、sed、awk)

    Linux三剑客指的是grep sed awk 其中grep擅长查找功能 sed擅长取行和替换 awk擅长取列 一 grep grep作用是筛选 查询 文本搜索工具 根据用户指定的 模式 pattern 对目标文本进行过滤 显示被模式匹配到
  • bp神经网络算法matlab程序,bp神经网络的matlab实现

    MATLAB中BP神经网络的训练算法具体是怎么样的 先用newff函数建立网络 再用train函数训练即可 1 正向传播 输入样本 gt 输入层 gt 各隐层 处理 gt 输出层注1 若输出层实际输出与期望输出 教师信号 不符 则转入2 误
  • MATLAB批量重命名存储数据

    目录 文件查找 文件移动和改名 所调用函数功能 文件查找 首先确定数据存储的文件夹地址 记为folder dir 如果该文件夹不存在需要访问的子文件夹 则直接复制文件地址 如果存在需要访问的子文件夹 则要利用dir函数进行寻找 将子文件夹信
  • Content-Type

    要学习content type 必须事先知道它到底是什么 是干什么用的 HTTP协议 RFC2616 采用了请求 响应模型 客户端向服务器发送一个请求 请求头包含请求的方法 URI 协议版本 以及包含请求修饰符 客户 信息和内容的类似于MI
  • SQL综合案例之电商漏斗转化分析,pv,uv及

    漏斗模型示例 不同的业务场景有不同的业务路径 有先后顺序 事件可以出现多次 注册转化漏斗 启动APP gt APP注册页面 gt 注册结果 gt 提交订单 gt 支付成功 搜购转化漏斗 搜索商品 gt 点击商品 gt 加入购物车 gt 提交
  • 什么是UTXO

    比特币UTXO是比特币网络中的一个重要概念 它是比特币交易的基础 也是比特币的账户系统 本文将从UTXO的定义 使用方式 优点和缺点等多个方面详细介绍比特币UTXO 一 UTXO的定义 UTXO Unspent Transaction Ou
  • 超详细用profile工具分析sql语句执行及status说明

    超详细用profile工具分析sql语句执行及status说明 介绍 sql执行慢的原因有可能很多种 怎么定位呢 可以用Query Profile人工具 通过该工具可以获取一条Query 在整个执行过程中多种资源的消耗情况 如 CPU IO
  • 如何防止服务器数据轻易泄露

    如今 对于中小企业和个人用户来说 在考虑到服务器的性能与安全成本的基础上 应该如何保护自己的服务器数据呢 1 提高服务器的容错能力 容错能力指的是 当服务器出现磁盘阵列错误 发现其中一组数据出错 服务器可以自动通过其他磁盘来纠正错误 恢复到
  • deep learning编程作业总结3---一步步搭建多层神经网络及应用

    本周的主要学习了如何搭建一个多层神经网络 涉及较多的理论知识 因此本编博客将对自己所学的有关神经的知识做一个总结 图1展示的是具有4个隐藏层的神经网络结构 它的输入由x1 x2 x3构成 表示样本X具有三个特征 随后进入第一个隐藏层 该层分
  • python财务报表预测股票价格_建模股票价格数据并进行预测(统计信号模型):随机信号AR模型+Yule-Walker方程_Python...

    1 背景 针对股票市场中AR 模型的识别 建立和估计问题 利用AR 模型算法对股票价格进行预测 2 模型选取 股票的价格可视为随机信号 将此随机信号建模为 一个白噪声通过LTI系统的输出 通过原始数据求解 所建模型参数 得到模型 即可预测近
  • 华为od业务主管面试问题-我的回答

    目录 1 怎么处理项目上的需求 2 业余会不会学什么东西 3 你对加班的看法 4 你对OD的看法 5 哪里人 6 后续的发展 7 你对华为的认识 对当前岗位的了解 1 怎么处理项目上的需求 gt 项目经理和产品经理进行需求对接 gt 项目经
  • vant-list + toast分页加载,数据加载后会滚动至顶部

    vant list toast分页加载 数据加载后会滚动至顶部 主要原因是 toast组件在全局添加了 pointer event none 解决办法 在对应的van list的属性值添加 pointer event volunteer l