禁止页面下拉刷新兼容 pc/ios/安卓/微信

最新推荐文章于 2023-11-22 15:06:22 发布

wayne丶

最新推荐文章于 2023-11-22 15:06:22 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_39408204/article/details/88554067

javascript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种方法，通过使用JavaScript阻止网页上的触摸滑动操作，适用于不需要滚动的固定布局页面。但此方法会导致页面内容过长时无法通过触摸进行滑动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$("body").css({'touch-action': 'none'});
document.body.addEventListener('touchmove', (e) => {
    e.preventDefault();
    e.stopPropagation();
}, { passive: false })

//不适合滚动页面若页面内容过长将不能滑动

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wayne丶

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端使用 Vue.js 实现下拉刷新与上拉加载

小白菜的博客

05-16

1048

本文旨在为前端开发者提供在Vue.js项目中实现下拉刷新和上拉加载功能的全面指南。内容涵盖从基础实现到高级优化技巧，适用于各种移动端应用场景。本文将首先介绍核心概念，然后分别讲解下拉刷新和上拉加载的实现原理，接着提供实际代码示例，最后讨论性能优化和常见问题。下拉刷新(Pull-to-Refresh): 用户通过下拉手势触发数据重新加载的交互模式上拉加载(Infinite Scroll): 用户滚动到列表底部时自动加载更多数据的交互模式节流(Throttle): 限制函数在一定时间内只执行一次的技术。

02-微信小程序目录结构及配置

感谢关注-最近在编写开源的自动化测试框架还没整理完

07-30

1509

1.微信目录结构 2.配置说明 3.appjson配置项 4.window配置项 5.restartStrategy 6.tabBar配置项 7.创建一个自己的页面 8.真机调试

1 条评论您还未登录，请先登录后发表或查看评论

针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景的解决方案。

01-23

针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景的解决方案。

js禁止苹果页面底部滚动_Vue.js 实现禁止 h5 页面在 ios 浏览器内置的下拉 bounce 效果...

weixin_36296444的博客

01-14

1024

介绍vue-disbounce是一款基于Vue.js的自定义组件，可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果。组件:style="{'background-color':backgroundColor }"class="vd-wrapper">class="vd"ref="vd">export default {name: "vd",props: {backgro...

Vue3 移动端网页下拉，造成页面刷新，影响用户体验的修改

weixin_44076777的博客

09-22

1621

艺幻聊天室功能：移动端的一个聊天室，上滑会加载更多的历史消息，这样能够保存更多的用户历史数据，也能优化用户的聊天体验，不用进来就全部加载历史消息导致页面卡顿或者白屏。

禁止手机浏览器下拉刷新

热门推荐

lu900618的专栏

11-08

1万+

<body style="overflow:hidden"> </body>

Vue项目中微信浏览器页面刷新问题

Lucky_Q的博客

04-08

5794

运行在微信浏览器中的Vue项目，当需要用户主动对页面进行刷新时，会遇到如下问题：微信不支持location.reload()方法，在微信浏览器中会失效 Vue中的路由跳转是类似于ajax局部刷新，因此使用location.href=‘xxx+时间戳’ 这种方法时，页面不会重载 Vue自带的this.$router.go(0)无效 history.go(0)无效通过后来的研究和学习，找到了一...

微信小程序全局配置和页面配置

weixin_43128574的博客

11-10

2185

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。

微信H5开发之页面布局

u012386230的博客

08-05

917

随着微信用户数量超过 10 亿，作为 web 开发者，微信很多时候已经成为了我们 web 页面的载体，我们制作的页面几乎都会在微信上面展示和传播。于是，在开发过程中，如何去兼容微信，就成为了一个 web 开发者必须面对的问题。微信内部的浏览器是 QQ 浏览器，微信中的 QQ 浏览器跟我们 PC 上的浏览器有很大区别。特别是当我们做 web 开发的时候，会很明显地感觉到，PC 中调试好的页面，在微信中展示出来的却不是我们想要的样子。本场 Chat 我们先从页面布局开始说起，看看微信中那些虐过我们无数回的样

css手机页面禁止触屏下拉

weixin_45062076的博客

08-26

815

body里面加个样式 touch-action: none;

Vue移动端页面下拉刷新

ProgrammingWhite的博客

10-12

2471

这篇小作文有点长，不想看的朋友可以直接去找找vant组件中的 van-pull-refresh 朋友们，我这两天干了一件蠢事最近我们公司有一个移动端项目，是嵌在微信公众号中的，有一个新需求是给页面加上下拉刷新的功能。就是这个功能，我研究了两天，开始的时候，我自己封装了一个组件，试了之后发现在微信浏览器中打开没有效果，之后我就上网查，说是微信的touchevent事件和我自己的touchevent事件冲突了，所以我的下拉刷新功能就没有用。解决方案是在touchmove监听方法中添加e.preventDe

禁止web页面在ios中整屏上下弹动

gary的博客

04-26

3643

禁止body或者可滑动元素的 touchmove 事件例: vue this.$nextTick(() => { // 通过refs拿到dom元素, 给dom元素绑定touchmove事件, 其内容做操作 this.$refs.dom.addEventListener('touchmove', function (e) { if (!e.isSCROLL) { e.pr...

vue爬坑记录：禁止微信浏览器下拉出现“本网页由xxx提供”

Mirage

05-03

8043

很烦人的提示，特别是当前页面需要滚动的时候！上滑正常，下滑的时候很容易就会出现这个提示，严重影响使用体验。解决方案： 1、外层html、body等设为不可滚动,ps:#app为vue项目基础DOM;.wx-pages为App.vue内部路由 // 可以在写在reset里面 html, body, #app, .wx-pages { padding: 0; margin: 0; he...

禁止微信浏览器下拉回弹的效果。

Leo的专栏

05-15

4317

方法1： var overscroll = function(el){ el.addEventListener('touchstart', function(){ var top = el.scrollTop; var totalScroll = el.scrollHeight; var currentScroll = top + el.offsetHeight;

移动端禁止页面下拉刷新（页面有滚动区域）单页面应用

a1390033590的博客

10-25

3052

参考：https://www.cnblogs.com/dongcanliang/p/8946495.html function isscroll(dom,flag) { // 页面是否启用不可下拉 if(flag) { document.body.addEventListener('touchmove',function (event) { event.return...

vue解决ios橡皮筋回弹，禁止ios滑动回弹效果

ELEGAlOVE的博客

04-27

3033

css新属性overscroll-behavior //需要浏览器支持该属性 body { /* 禁用默认的下拉刷新和边界效果,但是依然可以进行滑动导航 */ overscroll-behavior-y: none; } 使用插件inobounce（但是只适用于ios系统，安卓不适用） //先下载npm install inobounce -s 使用 <script> import inobounce from 'inobounce' export default { dat

uniapp禁止页面下拉刷新(Android、IOS)

禁止页面下拉刷新 兼容 pc/ios/安卓/微信

禁止页面下拉刷新兼容 pc/ios/安卓/微信