位置: 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源码修改的就不贴了)

弹窗

<!-- @touchmove.stop.prevent 在u-popup已经设置了,所以触摸的滚动是阻断的,电脑鼠标滚轮滚动没阻断而已 --><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><!-- @touchmove.stop.prevent="() => {}" 写在 scroll-view 里是为了兼容电脑端,阻断上下拖拽动作 ,手机端 使用 overscroll-behavior-y: contain !important;就足够阻断滚动穿透了,@mousewheel.prevent阻止电脑端滚轮滚动穿透--><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>

 弹窗内容样式

<style scoped lang="scss">page {background-color: #F5F3F7;}.groupbuy-detail {width: 100%;background-color: #F5F3F7;}.mar-left {margin-left: 22rpx;}.mar-right {margin-right: 22rpx;}.space-between {justify-content: space-between;}.flex-end {justify-content: flex-end;}.align-center {align-items: center;}.redfont {color: #F32E3C;}.lightgrayfont {color: #999999;}.boldfont {font-weight: bold;}.lightgrayborder {border-bottom: 1px solid rgba(153, 153, 153, 0.15);}.bgwhite {margin-top: 20rpx;margin-bottom: 20rpx;padding: 20rpx 24rpx;background: white;}.v-look-more {position: relative;top: -20rpx;padding: 20rpx;background: white;display: flex;align-items: center;justify-content: center;}.red-btn-r {color: #FFFFFF;background: #FF384B;border-radius: 10rpx;}.light-red-btn-r {opacity: 0.6;}.btn-follow {padding: 8rpx 30rpx;font-size: 26rpx;}.btn-buy {padding: 14rpx 26rpx;font-size: 26rpx;}.shop-infor {margin-top: 90rpx;background: #FFFFFF;border-radius: 24rpx 24rpx 0px 0px;position: relative;}.shop-logo {position: absolute;top: -38rpx;left: 44rpx;}.shop-btns {padding: 26rpx 46rpx;display: flex;justify-content: flex-end;}.shop-first-infor {display: flex;justify-content: space-between;align-items: center;padding: 10rpx 43rpx;}.main-title {font-size: 32rpx;font-weight: bold;color: #333333;line-height: 38rpx;}.shop-second-infor {padding: 0rpx 43rpx;display: flex;.shop-second-infor-text {display: flex;align-items: center;}.shop-second-infor-text:nth-child(1)::after {content: '';width: 1px;height: 20rpx;background: #999999;margin-left: 20rpx;margin-right: 20rpx;}}.shop-intro {display: flex;align-items: baseline;margin-top: 30rpx;border-top: 1px solid rgba(153, 153, 153, 0.1);padding: 22rpx 44rpx 30rpx 44rpx;color: #666666;}.group-infor {margin-top: 20rpx;background: #FFFFFF;padding-bottom: 30rpx;width: 100%;}.group-title {font-size: 32rpx;font-weight: bold;color: #333333;padding: 42rpx 42rpx 24rpx 42rpx;// 识别换行符,手机端小程序不生效white-space: pre-line;}.group-intro {line-height: 38rpx;font-size: 28rpx;margin-bottom: 10rpx;white-space: pre-line;}.group-spu-1 {margin-left: 42rpx;margin-right: 42rpx;margin-bottom: 14rpx;border-radius: 10rpx;background: #F8F8F8;display: flex;align-items: center;padding: 20rpx 22rpx;}.group-spu-1-title {display: flex;align-items: center;width: 78rpx;word-wrap: break-word;// 不允许收缩flex-shrink: 0;position: relative;&::after {position: absolute;right: 0rpx;bottom: -4rpx;content: '';width: 1px;height: 84rpx;background: rgba(153, 153, 153, 0.3);}}.flex-shrink0 {flex-shrink: 0;}.spu-name {text-align: left;word-break: break-all; // 英文换行}.omit {display: -webkit-box;-webkit-text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}.spu-price {margin-top: 4rpx;display: flex;align-items: flex-end;font-size: 34rpx;font-weight: bolder;color: #F32E3C;.price-etr {padding-bottom: 4rpx;font-size: 24rpx;font-weight: normal;}}.group-second-infor {font-size: 22rpx;padding: 6rpx 42rpx 0rpx 42rpx;display: flex;color: #999999;.group-second-infor-text {display: flex;align-items: center;}.group-second-infor-text:nth-child(1)::after {content: '';width: 1px;height: 20rpx;background: #999999;margin-left: 20rpx;margin-right: 20rpx;}}.v-category-title {line-height: 45rpx;display: flex;align-items: center;font-size: 32rpx;font-weight: bolder;color: #333333;margin-bottom: 6rpx;box-sizing: border-box;}.v-category-title::before {content: '';width: 6rpx;height: 26rpx;border-radius: 6rpx;background: #FF384B;// margin-left: 28rpx;margin-right: 10rpx;}.v-btns {border-bottom: 2rpx solid #F5F3F7;position: fixed;bottom: 0;width: 100%;padding: 22rpx;background-color: #FFFFFF;display: flex;justify-content: space-between;.btn {flex: 1;font-size: 32rpx;padding: 20rpx;margin: 0rpx auto;border-radius: 12rpx;view-align: center;text-align: center;border: 1px solid #FF384B;}.btn-fill {color: #fff;background: #FF384B;}.btn-empty {color: #FF384B;background: #FFFFFF;margin-right: 22rpx;}}.popup-view {width: 100%;display: flex;flex-direction: column;background-color: #F5F3F7;border-radius: 30rpx 30rpx 0px 0px;.popup-view-title {background: #FFFFFF;padding: 28rpx 33rpx;}.popup-view-address {background: #FFFFFF;padding: 24rpx 33rpx;}.popup-view-actual-pay {background: #FFFFFF;padding: 26rpx 26rpx 22rpx 26rpx;// display: flex;justify-content: flex-end;}.btn-topay {height: 100rpx;background: #FF384B;color: #FFFFFF;display: flex;justify-content: center;align-items: center;font-size: 34rpx;}}/deep/ .uni-scroll-view {// 在真正的滚动区域设置 阻断滚动穿透overscroll-behavior-y: contain !important;}</style>

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语言基础)

  • vivo手机怎么看运行内存(vivo手机怎么看型号)

    vivo手机怎么看运行内存(vivo手机怎么看型号)

  • 蓝牙耳机怎么恢复中文(蓝牙耳机怎么恢复出厂设置教程)

    蓝牙耳机怎么恢复中文(蓝牙耳机怎么恢复出厂设置教程)

  • 华为荣耀20能开空调吗(华为荣耀20能开90帧吗)

    华为荣耀20能开空调吗(华为荣耀20能开90帧吗)

  • 光纤是什么材料(塑料光纤是什么材料)

    光纤是什么材料(塑料光纤是什么材料)

  • 腾讯课堂下课多久后有回放(腾讯课堂老师已下课)

    腾讯课堂下课多久后有回放(腾讯课堂老师已下课)

  • 苹果11usa有锁单机什么意思(iphone11usa有锁)

    苹果11usa有锁单机什么意思(iphone11usa有锁)

  • 联想小新电脑无法关机(联想小新电脑无法找到输出设备)

    联想小新电脑无法关机(联想小新电脑无法找到输出设备)

  • 微信语音忙线中对方能看到吗(微信语音忙线中可以设置吗)

    微信语音忙线中对方能看到吗(微信语音忙线中可以设置吗)

  • 抖音110405错误代码怎么办(抖音110405错误代码)

    抖音110405错误代码怎么办(抖音110405错误代码)

  • 逆光也清晰是什么手机(逆光也清晰是什么意思)

    逆光也清晰是什么手机(逆光也清晰是什么意思)

  • 苹果七支持无线充电吗(苹果七支持无线充电功能吗)

    苹果七支持无线充电吗(苹果七支持无线充电功能吗)

  • 微信怎么关联另一个微信号接收信息(微信怎么关联另一个微信号收款提示)

    微信怎么关联另一个微信号接收信息(微信怎么关联另一个微信号收款提示)

  • b150m主板配什么cpu(b150m主板配什么固态硬盘)

    b150m主板配什么cpu(b150m主板配什么固态硬盘)

  • 微信怎么改定位到别的城市(微信怎么改定位发朋友圈)

    微信怎么改定位到别的城市(微信怎么改定位发朋友圈)

  • 信息网络主要划分为(信息网络主要划分为三类)

    信息网络主要划分为(信息网络主要划分为三类)

  • 抖音怎么设置不能保存视频(抖音怎么设置不看他)

    抖音怎么设置不能保存视频(抖音怎么设置不看他)

  • 滴滴账号静默怎么解决(滴滴账号静默怎么解除)

    滴滴账号静默怎么解决(滴滴账号静默怎么解除)

  • 手机两个录音怎么合并(手机两个录音怎么合并免费)

    手机两个录音怎么合并(手机两个录音怎么合并免费)

  • ipad六代叫什么(ipad六代百度百科)

    ipad六代叫什么(ipad六代百度百科)

  • 微信设置图案锁在哪(微信设置图案锁在哪里设置华为)

    微信设置图案锁在哪(微信设置图案锁在哪里设置华为)

  • 两个m2接口速度一样吗(两个m2接口速度不一样)

    两个m2接口速度一样吗(两个m2接口速度不一样)

  • lumion快捷键(lumion快捷键删除)

    lumion快捷键(lumion快捷键删除)

  • apple pencil一代和二代的区别(apple pencil一代和二代笔尖一样吗)

    apple pencil一代和二代的区别(apple pencil一代和二代笔尖一样吗)

  • 社交类app有何设计思路(社交类应用)

    社交类app有何设计思路(社交类应用)

  • 苹果Mac OS X系统快速显示/恢复隐藏文件的方法介绍(苹果macbook 系统)

    苹果Mac OS X系统快速显示/恢复隐藏文件的方法介绍(苹果macbook 系统)

  • php消息队列的介绍(php 队列)

    php消息队列的介绍(php 队列)

  • 个人开发选项
  • 交印花税合同上每个月价格要一样吗
  • 律师事务所的所训
  • 企业购买银行理财的条件
  • 以件数为印花税计税依据的有哪些
  • 增值税发票四舍五入
  • 小规模开普票多少税点
  • 以前年度少计提费用
  • 小规模纳税人计税方法
  • 商业企业收取各项费用的税务与会计处理
  • 开票系统维护费计入什么科目
  • 企业所得税清算是什么意思
  • 以公司名义办宽带怎么办
  • 稳岗补贴能享受多久
  • 核定征收金额如何确定
  • 事业单位购买固定资产如何记账
  • 核定征收的企业不能弥补亏损
  • 企业装修期间开工怎么办
  • 建筑工程总包分包的内容
  • 企业计提的工资如何算
  • 应收账款周转天数和应收账款周转率的关系
  • 社保公积金代缴
  • 交了预付款后,一方违约怎么处理
  • 公司清理固定资产怎么开票
  • 人力资源服务收入计入什么科目
  • 此应用无法在你的电脑上运行w11
  • 退回现金怎么写分录
  • 无法设置系统更新的原因
  • php redis实现秒杀思路
  • 富士通FUJITSU笔记本电脑开机进入BIOS的方法(F2)
  • Win11 Build22000.346 Beta/Release预览版发布 KB5007262更新汇总
  • 体积最小的机械硬盘
  • 马齿笕对什么病最有效?
  • php text
  • 发票管理的基础环节
  • 印花税土地使用税和房产税怎么做会计分录
  • 实行核定征收印花税的纳税期限为一个月税额较小的
  • 新罕布什尔州的邮政编码
  • 库存现金盘亏会计分录无法查明原因
  • 收到证券公司异常交易
  • 收入凭证填写
  • 机器学习:基于逻辑回归对优惠券使用情况预测分析
  • jsp连接mysql8数据库
  • java面试题及答案下载
  • idea 创建maven项目读取pom报错
  • 个税专项附加扣除具体怎么操作
  • 使用筷子就餐会不会传染乙肝病毒
  • 抵账房啥意思
  • 库管和车间工人哪个好
  • 企业注销时还有进项税
  • 变卖废旧物资的增值税税率
  • 公司银行开户的经办人有无风险
  • 股权司法冻结及司法划转解释
  • 公司帮员工买的意外险钱是打到公司还是员工账号
  • 新老税法
  • 应付票据转应付账款会计分录
  • 登记现金日记账收入栏的依据有
  • 如何理解会计中的借贷? 知乎
  • 临时工工资如何做账
  • 中标单位支付代理费
  • 经营性应收项目和经营性应付项目
  • 现金折扣与商业折扣的计算
  • 车辆折旧费法律支持吗
  • 明细分类账的记账
  • linux如何安装c语言编译器
  • linux系统中的用户大体可分为三组
  • solaris如何关闭usb接口
  • freebsd安装pkg
  • STMGR.EXE - STMGR是什么进程
  • schedulerv2.exe - schedulerv2是什么进程 有什么用
  • ie8怎么设置默认ie7模式
  • 弹窗windows10安装失败
  • [置顶] [寒江孤叶丶的Cocos2d-x之旅_27]CocoStudio导出的LUA文件怎么使用?
  • android游戏开发用什么语言
  • python2与python3的区别
  • 浅谈插入排序算法在Python程序中的实现及简单改进
  • 电子普票最多领多少
  • 国家税务总局官网电子税务局
  • 企业破产享有的债权可否提前到期
  • 年终奖怎么报个税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设