隐藏微信H5页面下拉出现的网址

最新推荐文章于 2024-08-08 13:41:49 发布
最新推荐文章于 2024-08-08 13:41:49 发布
阅读量5.6k 收藏 3
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zgrkaka/article/details/80400986
版权
微信H5页面下拉时会显示网址，本文介绍了如何使用better-scroll插件来模拟下拉操作，避免网址的显示。通过NPM或script加载方式安装better-scroll，然后传入DOM元素实例化，实现隐藏网址的效果。更多用法和详细文档可参考官方文档。
摘要由CSDN通过智能技术生成

微信h5页面在进行下拉操作的时候会出现网址，如下图：

在很多时候，并不想暴露这个网址，这时候可以模拟微信下拉操作，从而避免这种情况。而模拟这种操作可以一个叫 better-scroll 插件实现。

这里说下大概用法：

安装

NPM

better-scroll 托管在 Npm 上，执行如下命令安装：

npm install better-scroll --save
最低0.47元/天 解锁文章
John的WEB前端学习日记
关注
专栏目录
微信小程序之滑动页面隐藏和显示组件
专注前端技术，包括Web端、移动端、小程序、APP
06-19 4220
用csdnAPP的用户都知道，在发布blink动态时，那个红色按钮会随着你滚动页面消失或者出现。往上滑动时，按钮消失。往下滑动时，按钮出现。 今天我们就模仿一下这个功能，只不过我们换中样式，让它逐渐滑出页面，或逐渐从页面之外滑到固定位置。 效果图： 滑动前： 滑动后： 此功能是往上滑动消失，往下滑动出现。 实现步骤： 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : ''}} sendDynam
隐藏微信浏览器中下拉出现的网址
一个慢的博客
09-28 2591
在微信浏览器或者小程序中访问内嵌的h5页面时 下拉会出现当前h5页面的域名地址，为了美观和安全开发的时候不希望看到这个网址。 那么要怎么解决？ 参考微信浏览器禁止页面下拉查看网址这篇文章 具体解决思路如下： 要解决这种问题肯定不是只有单个页面，可能会涉及很多个页面，所以需要提供一种改动最小，最通用的解决方案，不去修改具体每个页面的代码。 用各种js和DOM操作的手段也可以解决，但是会涉及兼容性等问题，改动比较多不合适多个页面的改动，具体的思路在上面那篇文章里 我就不再赘述。 改动最小最易复用的解决方
微信浏览器禁止页面下拉查看网址导致其他scroll失效
最新发布
前端人的博客
08-08 173
移动端有 touchstart touchmove 绘制矩形，发现向下移动时会出现页面下拉，看到浏览网页地址。短短几行代码确实完美解决了！但是副作用却很大，导致网页内其他 scroll 全部失效，这该如何解决呢？此方案可以解决上下滑动 scroll，对于左右 scroll 需要再改改！此方法写的较简约，使用 vue3 setup ，看不懂的勿喷！方案一：prevent-scroll。
微信h5页面禁止下拉露出网页来源
热门推荐
梧桐下的四叶草
10-21 1万+
转载自：http://www.cnblogs.com/cococe/p/5956870.html 1.可以给document的touchmove时间禁止掉就行了 1 2 3 document.querySelector('body').addEventListener('touchmove', function(e) {
H5页面禁用微信浏览器下拉
12-07
H5页面禁用微信浏览器下拉,使其下拉不会出现黑色来源显示，在JS文件中定义此方法即可。
简单粗暴 隐藏h5页面在微信端底部出现的白色导航条
ROC_Chen95的博客
12-08 4278
前言 相信很多写H5的小伙伴，在H5页面跳转的时候底部会出现威胁你自带的导航栏，说实话没什么用处，主要还占用了高度，这时候写的页面和UI就有点出入。这是因为新版微信在苹果iOS 端的h5页面如果有路由跳转，而我们一般跳转路由都是用this.$router.push(’/路径’)，这种方法会跳转到指定url路径，并在history栈中添加一个记录，点击后退会返回到上一个页面，所以底部会出现导航栏，用以调回上一个历史记录的路由。 解决办法 很简单：只需要用this.router.replace(′/路径′)代替
微信h5界面隐藏刷新功能_隐藏微信H5页面下拉出现的网址
weixin_39981624的博客
12-19 636
微信h5页面在进行下拉操作的时候会出现网址，如下图： 在很多时候，并不想暴露这个网址，这时候可以模拟微信下拉操作，从而避免这种情况。而模拟这种操作可以一个叫better-scroll插件实现。这里说下大概用法：安装NPMbetter-scroll 托管在 Npm 上，执行如下命令安装：npm install better-scroll --save接下来就可以在代码中引入了，webpack等...
微信浏览器禁止页面下拉查看网址实例详解
08-30
在微信浏览器中，防止页面下拉查看网址可以通过JavaScript代码隐藏默认的touchmove事件。例如，使用jQuery库，可以使用以下代码： ``` $('body').on('touchmove', function(event) { event.preventDefault(); }); `...
uniapp中h5页面在微信中下拉出现地址，解决方法
qq_65497038的博客
07-11 431
1.首先禁止用户进行下拉，检测用户有下拉到顶点的动作就让禁止下来。//最后一次y坐标点}, {},2.进行模拟下拉动作，这一块借助使用github的一个插件3.本人使用的是2.0的方法，可以根据自身需求使用4.以下是2.0的使用方法进行下载还需要用到一个pulldown以下是完整代码部分做这个的时候出现了一些坑：1.首先在uniapp中使用view 包裹 内容的时候出现获取不到根节点的所以使用div来包裹。
微信浏览器h5隐藏下拉域名，同时内容可以正常滚动（vue)
weixin_39503910的博客
05-24 1019
1.根目录页面 index.html <script> let overscroll = function(el) { el.addEventListener('touchstart', function() { let top = el.scrollTop let totalScroll = el.scrollHeight let currentScroll = top + el.offsetHeight if (top === 0) { el.
禁用微信浏览器的下拉_解决微信浏览器禁止下拉查看真实域名网址的问题
天马3798
08-30 1786
一、原理 监听touchmove 事件，取消默认操作，则就不会触发页面的下拉。 二、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
微信h5阻止下拉出现“网页由...提供”
二七二十七的博客
03-17 2195
在微信h5的开发中，解决在微信打开h5页面时，禁止下拉页面查看“网页由…提供”获取网页的来源，兼容安卓和ios，实测有效
微信中禁止网页下拉出现"网页由XXX提供" 【亲测有效】
weixin_34185364的博客
06-18 5530
最近在开发过程中遇到新的需求：在微信公众号中禁止下拉出现我司域名，微信公众号中的域名是由微信内置浏览器根据网址自动读取，暂时不支持自定义功能。在无法更改的前提下，想到了禁止页面下拉的方法。于是有了以下代码： 参考:微信中打开网页，下拉会显示网页由XXX提供，但是有些网页却没有，不同平台不同手机也不一样，这是什么原因？ $(document).ready(function(){ ...
防止微信H5下拉出现域名究极解决方案
weixin_43821171的博客
03-09 2049
防止微信H5下来出现域名的究极解决方案
html游戏禁止微信浏览器下拉,微信H5页面禁止下拉露出网页来源
weixin_31974443的博客
05-31 428
可将position设置为fixed;其就不会上下滑动。1.可以给document的touchmove事件禁止掉就行了document.querySelector('body').addEventListener('touchmove', function(e) {e.preventDefault();})2.如果页面有部分区域必须需要滑动，需要用touchmove事件的话，那么可以把那部分的to...
微信h5页面下拉露出网页来源的解决办法
高先生的猫
08-24 1041
微信h5页面下拉露出网页来源的解决办法：将document的touchmove事件禁止掉 //禁止页面拖动 document.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false }); 备注：要加上passive: false，不然会出现以下报错 ...
H5微信中禁止网页下拉出现"网页由XXX提供"
qq_35165469的博客
08-12 6964
不知道你们都是怎么解决h5下拉时，固定元素会随之下移，顶部出现“此网页是有XXX提供” 下面是我的解决方案，希望能够对有需要的你有帮助： 我的布局使用的是position，头部、尾部使用的是position：fixed，内容区使用的是position：absulote并且可以滚动，下拉页面时，在ios中头部、尾部都是固定的，内容区滑动也OK的；但是在安卓手机上，下拉页面的时候，头部和尾部都会随...
禁止微信内置浏览器中下拉出现网址页面
ThisIsClark
08-19 2168
在微信内置的浏览器中，下拉页面可以看到当前网页的网址。在某些项目中，我们可能不想看到这样的网址，这时候就需要想办法去让用户在下拉时微信不显示这个地方。 这里我们用到的是比较暴力的方法，就是直接屏蔽调滑动事件，所以首先你要确认一下你的项目是不是不需要滑动事件。 代码如下： document.addEventListener('touchmove', function(e) {
微信H5禁止下拉 且可下滚动指定区域
05-24
可以通过CSS样式来实现微信H5页面禁止下拉和指定区域可下滚动。具体实现方法如下： 1. 禁止页面下拉： ``` body{ overflow: hidden; } ``` 2. 允许指定区域下滚动： ``` .scrollable{ overflow-y: scroll; -...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值