微信小程序长图超过屏幕页面不能下拉_微信小程序的页面弹窗过长滚动导致的底层滚动(滚动穿透问题)解决办法...

news/2025/2/5 4:00:27/

对于微信小程序,弹窗时,如果弹窗内容过长,需要滚动,滚动同时,底部页面跟着滚动,这如何优雅的处理这个问题?

处理1(不推荐): --添加 position:fixed

弹窗时通过给底部最大的view标签添加position:fixed;,从而达到页面不会跟着弹窗滚动

超长底部内容

弹窗超长内容

缺点:在取消了该属性后,页面自动滚动回页面顶部,失败。

处理2(不推荐):--添加 catchtouchmove 事件

给弹窗页面添加一个蒙层,蒙层绑定一个事件 catchtouchmove="preventTouchMove",对于函数 preventTouchMove则添加一个空函数回调,如下:

超长底部内容

弹窗超长内容

蒙层

JS

preventTouchMove() {}

缺点:滑动蒙层区域不会滚动,但是滑动弹窗内容时,页面还是会滚动,失败。

处理3(不推荐):--使用 scroll-view 标签

给页面添加 scroll-view 标签,在弹窗时给 scroll-view 标签的 scroll-y 的属性设为 false ,如下

超长底部内容

弹窗超长内容

缺点:看起来挺好用的,问题是,当遇到页面内容有 textarea 等原生组件时,页面就错乱了,失败;

最终处理4(推荐):通过样式处理


http://www.ppmy.cn/news/764112.html

相关文章

appium java滑动_JAVA+Appium 自动化实现手机屏幕滑动点击操作

背景:App某些页面元素无法通过Appium或其他方式抓取到,无法通过传统方式定位到元素。 原理:获取到当前屏幕的尺寸,在要操作的元素的屏幕位置构造像素点位,进而执行点击或滑动操作。 注:坐标定位时采用相对定位方式,可适配其他分辨率。 1、坐标点击屏幕元素 io.appium ja…

python ui测试 手机界面控件不可见时_python ui测试 手机界面控件不可见时_uiautomator2小笔记...

import uiautomator2 as u2 #通过WIFI d u2.connect(10 .0.0.1)#u2.connect_wifi(10 .0.0.1)的#别名 #通过usb获取设备 d u2.connect(123456f)#u2.connect_usb(123456f)的#别名 6、系统操作: …

unity 滑动屏幕改变视角看物体

滑动效果图: 做法: 把下面的Camera.cs脚本放在相机上,并给代码中的FollowObject拖拽被观察物体(旋转中心)即可 using UnityEngine; public class Camera : MonoBehaviour {public Transform FollowObject; //被跟随…

android 屏幕统计,OffScreen - 屏幕时间统计

编辑点评 你康康你今天又玩了多少次手机! OffScreen - 屏幕时间统计 介绍 OffScreen - 屏幕时间统计 日常生活中,大多数人有轻微甚至严重的「手机依赖症」,我们无时无刻盯着手机,不断地一边走路一边刷着朋友圈微博和抖音,没日没夜打游戏,通宵追着各种电视剧,被各种消息通…

html body自适应屏幕大小,如何让网页自适应所有屏幕宽度

随着网络的快熟发展,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上,有的…

bootstrap轮播图在手机上实现手指划动切换图片

$carousels $("#effect");//effect是轮播图id var startX,endX; // 在滑动的一定范围内,才切换图片 var offset 50; // 注册滑动事件 $carousels.on(touchstart,function (e) {// 手指触摸开始时记录一下手指所在的坐标xstartX e.originalEvent.touche…

小程序如何把按钮位置固定,不随手机屏幕上下滑动而变化

做了一款任何页面返回首页的按钮&#xff0c;代码如下 .back_home{ position: fixed; width:120rpx; height:60rpx; top: 50rpx; left: 0px; font-size: 24rpx; } <div style"z-index:30"> //用div使按钮在最高层&#xff0c;不会被遮挡 <button …

adb模拟三指划动,安卓通过adb 模拟键盘输入、点击屏幕、滑动、按键

1. 模拟键盘输入 adb shell input keyboard text "abc" 2. 模拟点击屏幕指定位置 adb shell input tap 500 500 3. 模拟滑动 从(500,800)滑动到(500,300) adb shell input swipe 500 800 500 300 4. 模拟Home按键 adb shell input keyevent 3 附录 安卓按键code值 KE…