vue 解决mintui弹窗弹起来,底部页面滚动bug问题

2024-11-29 10:25:11

经过dom层层注释缩小反馈终于找到问题所在。

问题经过

我在弹起弹窗的时候，设置了popupVisible为true

然后触发了vue的updated生命周期钩子函数

然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘

然后就导致了底部页面向上滚动

解决办法

去掉updated函数里面的重绘方法

补充知识：项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结

说实话，使用Mint-ui这个ui组件的过程中遇到了很多问题，这个ui组件问题真多。

先说今天的主题吧，我在使用popup选择框的时候和datepicker时间选择器的时候出现了滚动穿透的问题，特别是在ios上面。

找了好多方法，最后同事给出了一个好的方法，很简洁，于是就想着总结下来。

防止滚动穿透只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件就可以了，native是关键，这个表示根元素的意思，也就是body或者html

代码如下：

Popup组件：

<mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
  </mt-popup>
  // 防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件就可以了native是关键，这个表示根元素的意思，也就是body或者html
  <mt-popup
   v-model="popupVisible"
   position="bottom"
   @touchmove.native.stop.prevent>
   ...
  </mt-popup>

注意当mt-popup中还有div等子元素的时候，一定要注意，这个时候可能会有一些问题，会出现mt-popup这个元素也滚动不了的情况，所以说如果mt-popup本身不需要滚动的话，加了@touchmove.native.stop.prevent，底部页面就不会跟着滑动，如果mt-popup里面有滚动条需要滚动的话，可能就滚动不了，这个时候需要采取常规方法了，如下：

// 解决方式，通过监听popupVisible变量,在弹窗出现后禁止body节点touchMove事件，弹窗消失后恢复body节点的touchMove事件

 //html 如下
   <mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
   </mt-popup>
  // js 如下
  const handler = function(e) {
    e.preventDefault();
  }

  // vue实例内
  watch: {
    popupVisible: function (val) {
     if(val) {
       document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
     } else {
       document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false });
     }
    }
  }

Datetime Picker：

 <mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue"
    @touchmove.native.stop.prevent>
 </mt-datetime-picker>

对于时间组件加了@touchmove.native.stop.prevent，选择时间滚动的时候底部页面就不会跟着滚动了，很完美。

@touchmove.native.stop.prevent可以使我们省好多事，用起来吧！

以上这篇vue 解决mintui弹窗弹起来,底部页面滚动bug问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题

在移动端开发中使用到了Mint-ui组件库,其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题,官方文档最新版并没有解决这个问题. 现象还原官方地址手机扫码查看demo,查看两个组件Popup组件和Datetime的例子演示. 问题原因 HTML5触摸事件touchmove事件:当手指在屏幕上滑动的时候连续地触发所以当激活出组件Popup组件和Datetime Picker的弹出层时,我们在弹层选择内容时上下连续滑动是会触发该事件解决思路在弹出层出现之后阻止
解决vux 中popup 组件Mask 遮罩在最上层的问题

问题描述: 在IOS设备上遮罩层显示在弹出内容的上面,导致弹出内容不能正常显示内容和响应点击事件解决方案: 找到该Popup组件的祖先DOM节点是否被设置该CSS属性:-webkit-overflow-scrolling: touch; 若被设置将该CSS属性,则去掉即可. 补充知识:完美解决VUX的popup组件滑动穿透的问题最近使用vux的popup组件做个弹窗,在真机中使用发现存在滑动穿透的问题,即在弹出窗滑动内容,底层的内容也会跟着滑动,这种体验很不好. 废话不多说,直接上解决方法:
vant-ui组件调用Dialog弹窗异步关闭操作

需求描述: 需求描述:官方文档又是组件调用方式,又是函数调用方式. 我就需要一个很简单的:点击操作弹窗显示后,我填写一个表单,表单校验通过后,再调用API接口,返回成功后,关闭弹窗. 一个很简单的东西,element-ui用的很方便,在这里就懵比了,刚开始做的,弹窗关闭了,才返回异步接口调用的结果.网速慢点,用起来真的很不好. 正确的解决方式一: <van-dialog v-model="showDialog" title="提示" show-cancel-b
vant-ui框架的一个bug(解决切换后onload不触发)

前几天做的项目里有用到下拉刷新.使用了vant-ui里的 List 列表瀑布流滚动加载,用于控制长列表的展示先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件官方提供了三种方法.(我使用了第三种,全局引入方法) 方式一. 使用 babel-plugin-import(推荐) babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装 babel-plugin-import 插件 np
vue 解决mintui弹窗弹起来,底部页面滚动bug问题

经过dom层层注释缩小反馈终于找到问题所在. 问题经过我在弹起弹窗的时候,设置了popupVisible为true 然后触发了vue的updated生命周期钩子函数然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘然后就导致了底部页面向上滚动解决办法去掉updated函数里面的重绘方法补充知识:项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结说实话,使用Mint-ui这个ui组件的过程中遇到了
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

话不多说,直接上问题图片这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面网上搜到的解决方案有两种, 一种是监听页面高度(我采用的这种) 一种是监听软键盘事件(ios和安卓实现方式不同,未采用) 下面是实现代码 data() { return { docmHeight: document.documentElement.clientHeight ||document.body.clientHeight, showHeight: document.document
vue 解决数组赋值无法渲染在页面的问题

在做一个网页重构成VUE的时候,有段代码是这样的一直能打印出pics的值,但是就是无法渲染出来,检查了不是视图那边是错,最后发现其中有两处错误,一处是this指向问题,此地打印出来的this.pics并不是data里面的pics的值,后面把success函数改成箭头函数即可,还有vue中数组赋值数组不能直接赋值. 可以用push方法,下面是修改后的代码以上这篇vue 解决数组赋值无法渲染在页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
禁止弹窗中蒙层底部页面跟随滚动的几种方法

场景概述众所周知,弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想要的效果,因此需要阻止这种行为. 那么,如何阻止呢?请看以下分析: 方案分析方案一打开蒙层时,给body添加样式: overflow: hidden; height: 100%; 在某些机型下,你可能还需要给根节点添加样式: overflow: hidden; 关闭蒙层时,移
jQuery实现弹窗下底部页面禁止滑动效果

在项目开发过程中,经常会遇到带有弹窗的页面,尤其是在移动端.在没有特别要求的情况下,弹窗弹出后,弹窗下的底部页面依然能够滑动.为了得到更好的用户体验,需要做到触发弹窗时,弹窗底部页面禁止滑动,关闭弹窗时,弹窗底部页面恢复滑动,具体思路如下: 1.触发弹窗时,获取滚动条所在的位置. 2.将底部页面的position属性设置为fixed. 3.设置底部页面的位置为触发弹窗时的初始位置. 4.关闭弹窗时,恢复底部页面的position属性. 5.恢复底部页面的滚动条高度. //触发弹窗底部页面禁止滑动
vue实现移动端弹出键盘功能(防止页面fixed布局错乱)

监听页面高度,当键盘弹出时,将按钮隐藏. data() { return { docmHeight: document.documentElement.clientHeight ||document.body.clientHeight, showHeight: document.documentElement.clientHeight ||document.body.clientHeight, hideshow:true //显示或者隐藏footer } }, watch: { //监听显示高度
Vue出现弹出层时禁止底部页面跟随滑动

背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供的@touchmove.prevent方法来解决,但是我试了没起作用,或者@touchmove.prevent.stop也不起作用.下面是几种可以解决问题的方式,仅供参考: 1.在有弹出框的页面中,加上以下方法,弹出框出现时调用禁止滚动方法stopScroll(),弹出框去掉是调取允许滚动方法canScroll()即
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.onBottomLoaded(); 有效,其他的三个都无效,这两句话是意思是查询完要调用一次,用于重新定位分析原因: 首先这四个模块都是用的 <mt-loadmore :top-method="loadTop" :bott
Vue解决移动端弹窗滚动穿透问题

一.问题描述在移动端的H5页面中,我们经常会遇到 "点击按钮-->弹窗-->选择选项" 这样的场景.而在选项过多出现滚动条时,滚动滚动条至容器的底部或者顶部.再往上或往下拖动滚动条时,滚动动作会出现穿透,这时候底部的body也会一起滚动. 问题总结:内容在滚动到容器的顶部或者底部时,再向上或向下强行滚动 ,则出现滚动穿透二.解决方案思考参考了网上一大堆的解决方法,大可分为三类方法.经过认真的思考和分析,个人的总结如下: 使用js去控制和改变css 1. 弹窗出现 1
vue点击弹窗自动触发点击事件的解决办法(模拟场景)

业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件方法一,vue自定义指令 direc

vue 解决mintui弹窗弹起来,底部页面滚动bug问题

相关推荐

随机推荐