vue使用mintui弹窗弹起来，底部页面滚动bug解决

最新推荐文章于 2020-12-24 13:43:34 发布
最新推荐文章于 2020-12-24 13:43:34 发布
阅读量1.2k 收藏
点赞数
分类专栏： js 前端 vue
本文链接：https://blog.csdn.net/sufubo/article/details/89535316
版权
前端 同时被 3 个专栏收录
91 篇文章 0 订阅
订阅专栏
js
79 篇文章 0 订阅
订阅专栏
vue
34 篇文章 0 订阅
订阅专栏

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

问题经过

  • 我在弹起弹窗的时候，设置了popupVisible为true
  • 然后触发了vue的updated生命周期钩子函数
  • 然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘
  • 然后就导致了底部页面向上滚动

解决办法

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

vieber
关注
专栏目录
vue解决mintui中使用MessageBox弹窗拦截，移动端多次点击手机的物理返回键，选择确定后页面返回不正确问题
m0_62117425的博客
06-16 893
vue mintUI的MessageBox弹窗，手机多次返回后，显示页面不正确
vue使用mintUI踩坑——不显示样式/导入mui.css报错/build不了
刘大白的白白的博客
07-14 2560
vue-cli3.x之mint-ui按需引入 按需引入 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 首先，安装 babel-plugin-component： npm install babel-plugin-component -D 然后，将 babel.config.js修改为： module.exports = { pres...
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
01-18
经过dom层层注释缩小反馈终于找到问题所在。 问题经过 我在弹起弹窗的时候，设置了popupVisible为true 然后触发了vue的updated生命周期钩子函数 然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘 然后就导致了底部页面向上滚动 解决办法 去掉updated函数里面的重绘方法 补充知识：项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结 说实话，使用Mint-ui这个ui组件的过程中遇到了很多问题，这个ui组件问题真多。 先说今天的主题吧，我在使用popup选择框的时候和datepick
mint-ui —— 从底部弹起可配置的数据
qq_27483091的博客
07-09 388
<template> <div class="talk"> <div@click="addTalk"></div> <div class="">{{sortType}}</div> <mt-actionsheet :actions="actions" :cancelT...
Mint-ui popup 使用 （指定位置）
gansilian的专栏
07-06 1711
Mintui Popup 使用 Mint -ui 网址 http://mint-ui.github.io/#!/zh-cn 示例： Popup 弹出框，可自定义内容。 引入 import { Popup } from ‘mint-ui’; Vue.component(Popup.name, Popup); 例子 position 属性指定了 popup 的位置。比如，position 为 ‘bottom’ 时，popup 会从屏幕下方移入，并最终固定在屏幕下方。移入/移出的动效会根据 position 的
mintUI中Popup的使用
weixin_43837268的博客
09-05 2851
1.index.html <!-- 引入mint-ui --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> <script src="https://unpkg.com/mint-ui/lib/index.js"></script> 2.vue....
mintUI Popup的使用
qq719756146的博客
12-13 1万+
引入: import { Popup } from 'mint-ui'; 使用: template &amp;lt;mt-popup v-model=&quot;popupVisible&quot; position=&quot;bottom&quot;&amp;gt; &amp;lt;div&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/mt-popup&amp;gt;
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
01-18
在移动端开发中使用到了Mint-ui组件库，其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题，官方文档最新版并没有解决这个问题。 现象还原 官方地址 手机扫码查看demo，查看两个组件Popup组件和Datetime...
vue 点开弹窗最大化_vue 全屏弹窗（从底部上滑出现）
weixin_39583521的博客
12-24 1362
.fullscreen-dialog-wrapper{position: fixed;top: 0;right: 0;bottom: 0;left: 0;overflow: auto;margin: 0;z-index: 1001;opacity: 1;}.fullscreen-dialog{position:relative;margin:0 auto 50px;background:#fff;...
vue中使用mint-ui的mt-popup出现滚动穿透问题解决方法
alize的博客
07-30 3262
防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件 <mt-popup v-model="popupSCVisible" position="bottom" model="true" closeOnClickModal="true" @touchmove.native.sto...
mint-ui popup自动关闭
u011927449的博客
05-22 493
<template> <div class="hello"> <input type="text" v-model="name" @blur="checkname"> <mt-popup v-model="popupVisible" position="top" popup-transition="popup-fade" > {{msgtip}} </mt-popup> </div> </template> ...
底部弹出选则层
CSDN_qiange的博客
07-08 718
<template> <view> <page-head :title="title"></page-head> <view class="uni-padding-wrap"> <view class="uni-btn-v"> <button type="default" @tap="actio...
mint ui------------Picker与Popup的实际运用
若如流水 淡淡流过
08-23 1万+
最近小生一直在做关于vant 与 mint ui 的小列子，也写了关于他们两种的插件的运用与方法。 这次讲mint ui之Picker与Popup的实际运用： 1.首先我们需要装mint ui 插件   npm install mint-ui --save //淘宝镜像 cnpm install mint-ui --save  2.在main.js在引入 import Mint f...
Vue2.0-mint-ui解决移动端苹果手机有滚动穿透的问题
swiftlinlei的博客
07-23 5187
1.遇到的问题：使用mint-ui的弹窗选择时底部页面会出现滚动效果（仅出现在苹果手机，安卓手机，pc端正常） 2.问题原因：滚动穿透，这是啥，我也不懂 3.解决方式：参考文档，了解下：https://blog.csdn.net/weixin_40126227/article/details/80858990 思路就是弹出层打开的时候禁止body的滑动事件，弹出层关闭恢复body的滑动事件 ...
vue插件实现弹框+滚动锁屏
sonlife的博客
09-21 2413
1、实现该插件的背景 由于公司活动页面涉及弹框交互的操作比较多，为了实现弹框show出来的时候，可以在让背景元素在当前位置锁住，提高用户的体验，因此撸了一段代码，完美实现了此需求，并且解决了滚动穿透的问题 2、解决方案 方案一： 当弹框show出时，设置根元素和body元素的高度为屏幕高度，并且设置overflow为hidden，关闭弹框的时候移除样式 方案二： 弹框show出时，设置body元素...
mint ui分页无限滑动问题
too_money的博客
06-01 397
mint-ui Infinite scroll 重复加载、加载无效的原因及解决方案 </h1> <div class="clear"></div> <div class="postBody"> 1.无限滚动的运用场景： 一般运用在列表展示，有分页、下拉加载更多的需求中。 2.代码分析 代码很简单，实现了列表分页，数据加载完之后显示数据状态 <template> <div class="list-data" ...
vue mint-ui 使用手册
热门推荐
dkh_321的博客
09-28 3万+
npm 安装 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/
Vue中Mint-ui底部弹出(上拉)组件
weixin_30295091的博客
02-05 800
1 <template> 2 <div> 3 <div class="page-actionsheet-wrapper"> 4 <button class="mint-button mint-button--default mint-button--large" @click="a...
项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结
时清云的博客
04-24 5705
说实话，使用Mint-ui这个ui组件的过程中遇到了很多问题，这个ui组件问题真多。先说今天的主题吧，我在使用popup选择框的时候和datepicker时间选择器的时候出现了滚动穿透的问题，特别是在ios上面。找了好多方法，最后同事给出了一个好的方法，很简洁，于是就想着总结下来。代码如下： Popup组件： <mt-popup v-model="popupVisible" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值