讲师中心 微信公众号
AI工具推荐 视频效率加速

uni-app怎么禁止页面左右滑动

冬浩小哥_2590

冬浩小哥_2590

发布时间:2026-10-07 10:10:29

|

115人浏览过

|

来源于php中文网

原创

禁用页面左右滑动需分平台处理:iOS 唯一有效方式是 pages.json 中页面级 style 下配置 "app-plus": {"popGesture": "none"};Android 需在 onBackPress 中返回 true 拦截物理键/侧滑,弹窗场景须用 setStyle 动态开关。

uni-app怎么禁止页面左右滑动

uni-app 禁止页面左右滑动,核心是关掉 iOS 的侧滑返回手势(Android 无原生侧滑返回,但部分厂商系统或 WebView 层会模拟),popGesture 是唯一稳定生效的控制点,其他方式如拦截事件、CSS 阻断均无效。

pages.json 中配 popGesture 是最可靠入口

iOS 侧滑返回是系统级行为,JS 层收不到 touchstart 或 swipe 事件,onBackPress 在 iOS 上完全不触发。想真正禁用,只能从原生 Webview 层下手——而 pages.json 的 app-plus.popGesture 是 uni-app 官方文档确认、实测唯一稳定的配置位置。

  • 只接受两个值:"close"(默认,侧滑即关闭页面)和 "none"(彻底禁用,无响应)
  • "hide"、"disable"、大小写混用(如 "None")全部无效
  • 必须写在页面级 style 下,不能只写在 globalStyle;全局禁用需改 manifest.json 的 app-plus 节点
  • 示例(仅对详情页生效):
{
  "path": "pages/detail/detail",
  "style": {
    "app-plus": {
      "popGesture": "none"
    }
  }
}

安卓需额外处理 onBackPress 才算真正拦截

安卓平台所有返回动作(物理键、虚拟导航栏、侧滑手势)最终都会走到 onBackPress 生命周期钩子,但它的返回值决定是否拦截:

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • 返回 true:原生返回逻辑终止,页面不退
  • 返回 false 或不返回:放行,继续回退
  • options.from 可区分来源:"backbutton"(物理键/侧滑)或 "navigateBack"(JS 主动调用)
  • 典型写法(只拦物理返回和侧滑,放行 JS 调用):
onBackPress((options) => {
  if (options.from === 'backbutton') {
    return true;
  }
  return false;
})

弹窗场景必须用 setStyle 动态开关

配置文件只控制页面加载时的状态,弹窗打开/关闭是运行时行为,必须用 JS 实时修改 Webview 样式,否则用户在弹窗里一划,直接退回上一页。

  • 获取当前 webview:this.$mp.page.$getAppWebview()(Vue2/Vue3 均适用)
  • 弹窗打开时设 { popGesture: 'none' },关闭时务必恢复为 { popGesture: 'close' }
  • setStyle 是异步操作,无回调;不能只在 open 里关,漏掉 close 里的恢复,后续页面就再也侧滑不回去了

别碰 disableSwipeBack 和 CSS 方案

pages.json 中的 disableSwipeBack 仅在部分 iOS 小程序环境有效,在 APP-PLUS 平台基本不生效;用 overflow: hidden、touch-action: none 或监听 touchmove 阻止默认行为,对 iOS 侧滑返回完全无效——它根本不是页面 DOM 事件,而是原生 Webview 的手势识别层。

真正要禁用,只认 popGesture 这个开关,且必须分清平台差异、静态配置与动态控制的边界。漏掉安卓的 onBackPress 或弹窗后的样式恢复,都会导致行为不一致。

热门AI工具

更多
Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2323

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5023

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6090

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5618

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

803

2024.05.22

FrankenPHP集成Laravel详细教程
FrankenPHP集成Laravel详细教程

本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。

0

2026.10.08

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

120

2026.09.30

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

100

2026.09.30

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

80

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn