位置: IT常识 - 正文

uniapp 微信小程序和H5的弹窗滚动穿透解决(uniapp微信小程序上传文件)

编辑：rootadmin

uniapp 微信小程序和H5的弹窗滚动穿透解决滚动穿透：

推荐整理分享uniapp 微信小程序和H5的弹窗滚动穿透解决(uniapp微信小程序上传文件)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp 微信小程序开发,uniapp 微信小程序把页面转化为图片,uniapp 微信小程序框架,uniapp 微信小程序图片压缩,uniapp 微信小程序开发,uniapp 微信小程序把页面转化为图片,uniapp 微信小程序修改返回按钮,uniapp微信小程序上传文件,内容如对您有帮助，希望把文章链接给更多的朋友！

页面里的弹窗也是可以滚动的，然后页面本身内容多所以也是滚动的，就造成，在弹窗滚动的时候，页面内容也跟着滚动了。如图所示

ps: 电脑端分鼠标滚轮滚动和长按鼠标拖拽滚动，手机端只有触屏滑屏滚动，即像电脑端的长按鼠标拖拽滚动

我是在电脑上录屏的，所以两种情况的滚动穿透我都录上去

鼠标滚轮滚动的穿透

长按鼠标拖拽滚动的穿透

解决滚动穿透：

前提：我用了UViewUi1.0版本的弹窗组件

Popup 弹出层 | uView - 多平台快速开发的UI框架 - uni-app UI框架

然后我的场景是内容局部滚动，UView提供的内容局部滚动方案如下：

所以结构是这样的

<u-popup mode="bottom" v-model="show"> <view class="content"> <scroll-view scroll-y="true" style="height: 500rpx;"> <view> 局部内容局部内容</view></scroll-view><view class="confrim-btn"><u-button @click="show = false;">确定</u-button></view> </view></u-popup>1 解决电脑端长按鼠标拖拽滚动，即手机端的触屏滑屏滚动穿透问题（主要）电脑端

重要代码：

@touchmove.stop.prevent="() => {}"

这句代码加在scroll-view上

手机端

重要代码（我找了好久才找到这个属性的）：

overscroll-behavior-y: contain !important;

简单了解看这个：

https://www.jianshu.com/p/fb95e6552d13

完整学习看这个：

overscroll-behavior - CSS（层叠样式表） | MDN

这句代码是css的，因为用了UView的组件，所以这个要阻断滚轮链，就得要阻断真的滚动区域（最顶上的父级），直接加在我们的局部滚动scroll-view上是无效的，要加在最顶上的父级滚动区，这个需要你开调试者工具找，因为你可能用别的组件，多包了几层。

uniapp 微信小程序和H5的弹窗滚动穿透解决(uniapp微信小程序上传文件)

想改变深层元素的深层样式，代码如下

ps:

1、因为是改变了深层元素的样式，所以要手动刷新一下，不要热刷新，会没效果哈。

2、uniapp的插件引入，支持自己直接改源码的，所以，你可以直接去UView的弹窗文件里修改，就不用加 /deep/了。

2 解决电脑端的鼠标滚轮滚动穿透

其实是因为弹窗和弹窗的遮罩层（阴影层）没有阻止电脑端的鼠标滚轮滚动的操作，所以就导致了还存在鼠标滚轮滚动穿透。

这是是用了UView的组件的问题，所以直接去源码里改

重要代码

@mousewheel.prevent

遮罩层 u-mask:

弹窗 u-popup :

直接在这加，那弹窗的所有地方都不能鼠标滚动了，包括你自己的scrollview区域。

u-popup 的禁止滚轮滚动这个可以不弄，因为滚轮滚动挺方便的，想保留自己的scrollview区域的鼠标滚动，就要在非scrollview的地方加阻断滚轮事件的操作。而且只要加了下面的代码的，在你的局部滚动处（scrollview)滚轮滚动的穿透基本无了。

overscroll-behavior-y: contain !important;

我的完整效果代码(uview源码修改的就不贴了）

弹窗

<u-popup v-model="popupShow" mode="bottom" border-radius="24" @close="onPopupClose" duration="200"><view class="popup-view" v-if="popupShow"><block v-if="popuptype == 'pay'"><view class="x space-between popup-view-title lightgrayborder"><view class="main-title">跟团购买</view><u-icon name="close" color="#999999" size="28" @tap="onPopupClose"></u-icon></view><scroll-view scroll-y="true" style="height: 500rpx;"@touchmove.stop.prevent="() => {}"><view class="x align-center popup-view-address"><u-icon name="map" color="#FF384B" size="36"></u-icon><view class="y space-between mar-left"><view class="x"><view class="boldfont">收货名字</view><view class="mar-left">175891509xx</view></view><view class="spu-name" style="margin-top: 6rpx;">收货收货收货地址地址地址地址地址地址地址</view></view></view><view class="x bgwhite lightgrayborder"><u-image width="228rpx" height="228rpx"src="https://img12.360buyimg.com/n1/jfs/t1/216488/12/17456/103503/6275c6ddE0b23753c/7387ff8f9b3e5ee3.jpg"class="flex-shrink0" border-radius="10"></u-image><view class="y space-between mar-left "><view class="spu-name boldfont">BEAUTY-FACTOR/美丽因子化妆刷套刷黑金8支套刷腮红刷眼影刷斜形眼线刷唇刷黑金8支套刷</view><view class="lightgrayfont">200ml</view><view class="spu-price space-between"><view class="spu-price"><view class="price-etr">￥</view>398</view><u-number-box v-model="buyCountNum" :min="numberBoxMin" :max="numberBoxMax"size="24" input-height="44"></u-number-box></view></view></view><view class="popup-view-actual-pay"><view class="x space-between align-center"><view class="">商品总价</view><view class="boldfont">￥398</view></view><view class="x align-center flex-end " style="margin-top: 10rpx;"><view class="mar-right">共1件</view>实际支付<view class="spu-price" style="padding-bottom: 2rpx;">￥398</view></view></view><view class="bgwhite x align-center"><view class="mar-right">备注</view><u-input style="flex:1;" type="text" placeholder="请输入您需要备注的内容" maxlength="150":trim="false" /></view></scroll-view><view class="btn-topay">立即支付￥398</view></block></view></u-popup>

弹窗内容样式

script

popupShow: false,popuptype: 'pay',// 步进器buyCountNum: 1,// 剩余数量restNum: 0,numberBoxMin: 0,numberBoxMax: 0,

因为从自己代码里扣出来的，所以可能漏东西，但是问题不大，漏啥你们再自己补补就好了。

ps:

最后发现，在手机端我一个手指长按屏幕的在弹窗滑倒底部的时候，手指不松开，马上把另一个手的手指按住屏幕不松开的滑上滑下，发现还是存在滚动穿透了，只有这样操作的情况下才存在，所以我的解决方法没有很完美，如果你有其他的好法子请告诉我，谢谢。

搜了一下，一只手指按住屏幕另一只手指划得动屏幕叫做多点触控。

本文链接地址:https://www.jiuchutong.com/zhishi/288061.html 转载请保留说明！

上一篇：“ 百家论坛 ” - ChatGPT(百家论坛是正规期刊吗)

下一篇：JavaScript基础——JS简单案例(javascript语言基础)