微信小程序弹出层弹出后禁止页面滚动

禁止页面滚动的方法-微信小程序 在微信小程序中,有几种方法可以禁止页面滚动。 阅读详情

1.用一个view标签把页面禁止滚动部分包裹,并添加自定义类名 初始值为空

<view class="{{noRoll}}">
    <view class="main">内容区</view>
</view>

2. 在弹出层打开是,改变变量的值

  // 打开/关闭弹出框
  showPopup() {
    this.setData({
      show: true,
      noRoll: 'isNoRoll'
    });
  },
  onClose() {
    this.setData({
      show: false,
      noRoll: ''
    });
  },

3.给isNoRoll设置样式

/* 防止弹出层弹出后页面滚动 */
.disableScroll {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  overflow: hidden;
}

微信小程序--页面背景图固定不上滑 在页面下滑的时候,显示数据,并且在移动页面到底部的时候,页面的背景图不会跟着滑动。 阅读详情

相关推荐

微信小程序——小实现(禁止页面滚动、长按复制、长按识别二维码)

###1. 禁止页面滚动 对于小程序某些一屏的页面,特别是全屏的swiper,并不希望页面在竖直方向上可以滚动。 实现方式: 在需要禁止滚动页面的json中加入: &quot;disableScroll&quot;: true 注意:只在页面配置中有效,无法再app.json中设置该项 参考:https://developers.weixin.qq.com/miniprogram/dev/framework/con...

Joyce的前端日常 9982

微信小程序禁止页面上下滑动的三个方式

开发的时候,会遇到产品或者UI发出如下规定:1、如果是一屏的页面,就禁止页面能上下滑动2、如果显示弹窗的时候,长屏幕禁止上下滑动!感叹一句:好变态当然,感叹归感叹,但是还是得听不是,我找出了3种方式,看看大家喜欢哪个,就用哪个!第一种方式:页面最外层的盒子,使用绝对定位!这样页面也就不能滑动了!此方法呢,比较麻烦,写的代码比较多!但是还是能够实现的!源码如下: 第二种方式:在微信小程序app.json的window中,添加”disableScroll”:true,但是要注意,如果你是要在app.json

小鱼的博客 3万+

USB2.0学习1--基本概念

USB全称是 Universal Serial Bus,即通用串行总线,是一种计算机与外围设备进行数据交互的串行通信标准。USB协议是在1994年底由英特尔、IBM、Microsoft等公司联合提出的,现由USB协会(USB-IF)管理。USB使用差分信号来传输数据,具有传输速度快、支持热插拔、连接灵活、独立供电、协议向下兼容等优点,目前应用十分广泛。

原海青木的博客 3759

微信小程序弹窗禁止页面滚动的实现代码

在小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove 但是如果弹窗内部也需要滚动,需要用scroll-view包裹,并设置scroll-y catchtouchmove需要接收个方法,不然会一直警告 <view class="box">占位</view> <view class="pop" catchtouchmove="touchMove"> <view class="popbg"></view> <v.

weixin_43835827的博客 851

产品经理必备知识——API接口

在古代,我们的传输信息的方式有很多,比如写信、飞鸽传书,以及在战争中使用的烽烟,才有了著名的烽火戏诸侯,但这些方式传输信息的效率终究还是无法满足高速发展的社会需要。如果你选择允许,app就会根据你的当前位置为你提供更加个性化的一些服务,当然也有一些app拿到你的位置信息做出损害用户利益的行为,所以还是需要谨慎授权。首先,看接口文档的场景一般是自身业务模块需要获取外部的数据,但又不想自己重新开发,寻找外部已经实现的有开放能力的供应商(包含企业内部的)。通过发送请求和响应消息的方式实现程序间的通信。

WBKJ_Noah_的博客 3455

反激电源反馈环路设计:UC3842的FB脚与COMP脚接法对比与选型

在开关电源设计中,PWM控制器与光耦的反馈环路接法直接影响系统稳定性与动态响应。UC3842作为经典电流模式控制器,其FB脚和COMP脚分别对应内部误差放大器的输入与输出,决定了环路补偿由内部还是外部承担。FB脚接法利用内部基准和运放,设计简单、成本低,适合小功率适配器;COMP脚接法旁路内部运放,补偿网络外置,动态响应快、精度高,适合中大功率工业电源。理解两种接法的原理与差异,有助于在反激电源设计中优化环路补偿,提升负载调整率和批量一致性。

weixin_31887307的博客 316

微信小程序 弹出层禁止页面滚动

微信小程序 vant 中 所有弹出层都会有的一个问题 滑动弹出层 会出现页面也滚动 如下图 解决方法: 1、首先在最外围的类中加入overflow: hidden; 2、当弹出层出现的时候 给最外围的view 加入root-fixed 类 隐藏的时候 去掉root-fixed <view class="root {{isScroll?'root-fixed':''}}"></view> isScroll 控制是否绑定root-fixed 这个类 .root {

IT_iosers的博客 1393

RK3588S开发板实战:手把手教你调试IMX415摄像头(附常见问题排查)

本文提供了基于RK3588S开发板调试IMX415摄像头的完整实战指南。从硬件连接到软件配置,详细解析了设备树(DTS)设置、驱动加载验证及V4L2工具链使用,并附带了常见问题排查方法,帮助开发者快速解决摄像头调试中的典型问题,实现图像采集与性能调优。

assembly8low的博客 596

微信小程序 弹出层 禁止页面滚动的方法

场景描述 添加自定义的弹出框后,当滚动鼠标时下边的页面也会跟着滚动。 解决方案 为了在遮罩出现的时候禁止用户滑动页面,如下处理: 给这个遮罩层 绑定事件: 使用 catchtouchmove (1)在弹出层上添加 catchtouchmove=’true’ <!--弹出框 --> <view class="sh_Model_box" catchtouchmove='true'> ... </view> (2)也可以绑定有一个空事件 <view cat

sinat_33255495的博客 4097

商店销售预测(回归&随机森林)

通过准备线性回归的数据,我们发现了一些有趣的见解,包括周末的销售增长,公共部门支付工资时的销售增长,以及11月和12月的销售增长。如果我们选择包括这些,我们可能会得到更好的结果,但在这个时候,我们不会用它来做任何预测,而是将转向另一种可能给我们更好的结果的技术。在Kaggle竞赛中,要求我们应用时间序列预测,根据厄瓜多尔大型杂货零售商Corporación Favorita的数据预测商店销售情况,建立一个模型,准确地预测在不同商店销售的商品的单位销量。在快速查看我们的训练数据集之后,我们可以看到有很多零。

qq_45791012的博客 4750

保姆级教程:用再生龙Clonezilla Live给Ubuntu系统做全盘备份与恢复(含BIOS设置避坑)

本文提供了一份详细的Clonezilla Live教程,指导Ubuntu用户如何轻松完成全盘备份与恢复。从启动盘制作、BIOS设置避坑到备份参数解析和恢复操作,涵盖了所有关键步骤和常见问题解决方案,帮助用户高效保护系统数据。

weixin_42116058的博客 642

微信小程序弹出层禁止页面滚动

添加自定义的弹出框后,当滚动鼠标时下边的页面也会跟着滚动 解决办法: 在弹出层上添加 catchtouchmove=’true’ <!--弹出框 --> <view class="sh_Model_box" catchtouchmove='true'> ... </view> 注意:开发工具的模拟器上没有效果,必须真机测试,真机上有效果 ...

jstljspservlet的博客 1421

基于灰度信息的图像配准方法

图像配准方法分为三种:基于灰度信息方法、基于变换域方法和基于特征方法。基于灰度信息方法是直接根据图像或图像块灰度信息进行像素上的对齐,该方法主要思想是直接最小化图像信息差异。然而,图像信息差异的判断准则衍生出不同的配准方法。常见的基于灰度信息的图像配准方法包括互相关法、互信息法和误差平方和法。本节将分别对互相关法、互信息法和误差平方和算法展开介绍,并通过MATLAB进行演示。基于灰度的图像方法容易实现,但同样存在不足。该方法对成像条件(光照,遮挡)、图像形变旋转以及噪声极其敏感,同时具有较高的计算复杂度。

weixin_42068054的博客 3776

小程序弹出层禁止列表滑动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...

弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动。场景一:弹窗内无滚动内容可以在弹窗最外层元素绑定touchmove事件,触发事件返回false即(在vue类框架中也可以加.stop阻止冒泡)。简单写法:catchtouchmove='preventTouchMove',在js文件中定义一个方法preventTouchMove() { return } 即可。此种方式会阻止弹窗内...

weixin_36023192的博客 1186

通过一个具体的例子,讲解 SAP Cloud Platform Integration(CPI) 的使用方法

最近笔者由于项目需要,又得学习一个新工具:SAP Cloud Platform Integration,简称 CPI,以前又叫做HCI - HANA Cloud Platform Integration Service.笔者想通过本文,把使用这个工具的第一手体会,分享给曾经用过SAP CRM中间件,但尚未有机会接触到CPI的朋友们。之所以本文标题里把SAP CRM中间件和SAP CPI关联在一起,是因为二者同广义上说,扮演的都是系统集成里中间件的角色。SAP ERP和CRM通过qRFC进行业务数据同步,而中

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 2275

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

微信小程序、vue遮罩层出现禁止穿透遮罩滚动页面

<div class="detail-wrapper1" @touchmove.prevent> <div>

weixin_43837268的博客 3825

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

微信小程序input,如何不自动推上页面

背景 微信小程序输入框每次聚焦的时候都会导致页面抬起来,会导致内容看不见 问题 查看官方文档得到,是否抬起页面的属性是adjust-position, 通过设置true/false来控制是否抬起来,设置false后就不会抬起来了,但是输入框也不会抬起来,会一直沉底,被减胖覆盖着。 解决办法 input在触发focus的时候会返回一个对象,对象中包含一下信息: { currentTarget...

weixin_33782386的博客 2532

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

微信小程序弹出层禁止滚动穿透

uniapp实现微信小程序中禁止滚动穿透、打开弹出层禁止底部页面滚动

sxy323的博客 1771

[微信小程序] 弹出遮罩层后禁止背景层滚动的办法

先定义一个overflow:hidden的全局样式,然后在点击出现遮罩层之后让最底层的使用这个样式即可,class上可以绑定一个变量,动态赋值样式的名称,例如: app.wxss 代码片段 .disableScroll { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; overflow: hidden; } index.wxml 代码片段 <view class="{{ scrollStyle

我的米饭 1817

微信小程序打开弹出层页面还可以滚动,导致弹出层和内容分离。不如筛选的时候。

但是弹出层确实固定在一个位置不动,查了一下position:fixed.所以导致上面的菜单和下面的选项分家了。

肖肖肖丽珠的博客 1351

We前端之UniApp禁止遮罩弹窗下的页面跟随滚动、彻底解决小程序滚动穿透问题、微信小程序、滑动、穿透

We前端之UniApp禁止遮罩弹窗下的页面跟随滚动、彻底解决小程序滚动穿透问题、微信小程序、滑动、穿透

优快云博客主页地址:https://mengjian.blog.youkuaiyun.com/ 3029

微信body和弹出层都有滚动条,overflow:auto失效解决方案。

1. 禁止body滚动后,弹出层滚动overflow:auto失效; var DivScroll = function( layerNode ){         //如果没有这个元素的话,那么将不再执行下去         if ( !document.querySelector( layerNode ) ) return ;         this.popupLayer = docume...

zhaozilong666的博客 1794

微信小程序 解决自定义弹出层滑动时下层页面滚动问题

弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动。 场景一:弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件,触发事件返回false即(在vue类框架中也可以加.stop阻止冒泡)。 简单写法:catchtouchmove='preventTouchMove',在js文件中定义一个方法preventTouchMove() { return } 即可。 此种...

weixin_30364147的博客 895

微信小程序(6)——禁止页面滚动

▍写在前面(来访者请直接浏览下一条) 最近在做一个美食类小程序的时候,需要用到一个购物车,自己不好构思,就仿照美团的购物车写了一个,然后就在这卡了一下:购物车列表是fixed脱离文本流的,在上下滚动购物车列表的时候,底部的页面竟然也会跟着滚动,这怎么成,所以我就找了一下关于这个问题的解决方案。 ▍效果预览 首先小声说一句,为了节约时间,所以在做数据模拟显示的时候,所有的图片还有名...

蜗牛先生 6万+
上一篇: js如何实现获取0点的时间戳
下一篇: js随机取一个数组中的n项
叫灰灰的五岁小孩
博客等级 码龄5年 8粉丝 21原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值