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

news/2024/10/17 23:25:53/

开发的时候,会遇到产品或者UI发出如下规定:

1、如果是一屏的页面,就禁止页面能上下滑动

2、如果显示弹窗的时候,长屏幕禁止上下滑动!

感叹一句:好变态

当然,感叹归感叹,但是还是得听不是,我找出了3种方式,看看大家喜欢哪个,就用哪个!

第一种方式:

页面最外层的盒子,使用绝对定位!这样页面也就不能滑动了!此方法呢,比较麻烦,写的代码比较多!但是还是能够实现的!源码如下:

 position: fixed;top:0;left:0;

第二种方式:

在微信小程序app.json的window中,添加”disableScroll”:true,但是要注意,如果你是要在app.json中添加disableScroll,会导致所有页面无法上下滑动,这就是个大bug了,解决也很简单,你想在那个页面禁止页面滑动,就在哪个页面的json下,添加disableScroll就可以了,单独设置就行!代码如下:

//app.json中添加,window里面添加就可以了"window": {"disableScroll": true},//单独设置,比如index下,就在index.json设置{"navigationBarTitleText": "首页","disableScroll":true}

但是有些时候使用disableScroll并不合适,比如一个长页面,我需要弹窗出来的时候,才禁止上下滑动,弹窗隐藏的时候,又可以上下滑动!那就衍生第三个方式

第三种方式:

在弹窗的遮罩层或者内容层的view上,添加catchtouchmove=’true’,这个意思就是,你添加了catchtouchmove view的盒子,用户如果在这个盒子滑动的时候,是不能触发滑动效果的,一定要看清楚字面意思,不然会写错view,导致无效果哦!代码如下:

//弹窗遮罩层
<view  catchtouchmove='true'>
</view>


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

相关文章

企业微信客户端调试工具

最近自己在搞企业微信上的第三方应用&#xff0c;需要调试一些东西。没有像谷歌那样的开发者工具真的好头疼。 还好企业微信提供这样的工具。那我来说说自己是如何下载和使用的。 第一步&#xff0c;先去官网下载 常见问题 - FAQ - 接口文档 - 企业微信开发者中心 直接下载 …

h5判断是否在微信环境下

微信环境h5跳转小程序页面&#xff1a; 1、判断环境 var ua navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) "micromessenger") {//ios的ua中无miniProgram&#xff0c;但都有MicroMessenger&#xff08;表示是微信浏览器&#xff09;wx.min…

Windows运行vbs在微信下自动发送烟花、庆祝

相关链接&#xff1a;wshShell.SendKeys模拟键盘操作 在txt下粘贴以下代码&#xff0c;修改txt文件为vbs&#xff0c;根据需求自行调整 Set WshShellWScript.CreateObject("WScript.Shell")WshShell.AppActivate "WeChat.Application"for i1 to 10WScript…

微信小程序转发功能的实现

前段时间做了一个微信小程序的项目&#xff0c;在项目中有实现过小程序的转发功能,这里给大家分享一下&#xff0c;有不对的地方勿喷 微信小程序官方文档:基础 | 微信开放文档 实现小程序转发有二种方式&#xff0c;一种是用户点击右上角转发&#xff0c;一种是在html文件中通…

uniapp实现微信登录

项目描述 使用uniapp框架编写微信小程序&#xff0c;使用自己的后端&#xff0c;实现微信登陆功能。 登录流程 此处参考微信官网提供的 小程序登录流程时序 如下图&#xff1a; 图片来源&#xff1a;微信官方API文档 所以登录的流程即&#xff1a; 首先在前端调用login()…

Unity 打包微信

1、更换字体 打包微信时unity自带的字体不显示汉字&#xff0c;需要更换字体 2、下载插件 https://github.com/wechat-miniprogram/minigame-unity-webgl-transform/blob/main/Design/Transform.md 3、Unity 版本&#xff0c;需要支持WebGL 4、打包 添加插件后点击【微信小…

docker安装微信

文章目录 安装dockerpull bestwu/wechat启动微信创建微信容器docker start wechat方式启动微信容器 更优雅的方式使用微信下载合适的wechat icon将当前用户加入sudoers创建微信启动脚本创建快捷方式快捷启动 安装docker 略&#xff0c;看Get Docker pull bestwu/wechat 略。…

微信登录流程

主要流程&#xff1a; 微信授权登录让微信用户使用微信身份安全登录第三方应用或网站&#xff0c;在微信用户授权登录已接入微信的第三方应用后&#xff0c;第三方可以获取到用户的接口调用凭证&#xff08;access_token&#xff09;&#xff0c;通过access_token可以进行微信开…