小程序手势返回以及手机自带返回功能问题解决思路

已于 2022-05-19 16:48:00 修改
阅读量2.9k 收藏 4
点赞数 1
分类专栏： 小程序 VUE细节 Vue 文章标签： 微信小程序
于 2022-05-19 16:47:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47000305/article/details/124866420
版权
Vue 同时被 3 个专栏收录
56 篇文章 3 订阅
订阅专栏
VUE细节
46 篇文章 2 订阅
订阅专栏
小程序
2 篇文章 0 订阅
订阅专栏

一般苹果手机不会自带手势返回以及原生手机返回按钮，所以我们的组件返回功能是可以去做一些自定义的事情的。

但是安卓手机大部分有原生手机自带的返回按钮以及手势返回，这个时候我们可以通过 onUnload生命周期拦截到，我们需要在当前页面设置一个flag来记录是否使用了组件的返回功能，如果使用了组件的返回功能我们不需要走 onUnload这个钩子。

在这里插入图片描述
下面是组件返回功能
在这里插入图片描述

如果是手势返回或者手机自带返回

在这里插入图片描述

从而达到拦截住手势返回或者手机自带返回的效果～

希望微信团队还是抓紧出了拦截手势以及手机自带返回功能的API～

小张很嚣张～
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
高仿微信手势滑动返回功能
11-07
在Android应用开发中，"高仿微信手势滑动返回功能"是一种常见的用户体验设计，它允许用户通过在屏幕边缘向内滑动来实现页面的返回操作，这种交互方式模仿了微信APP的设计，使得用户操作更加直观和便捷。实现这一功能...
微信小程序阻止小程序返回的两种方法
qq_41954585的博客
05-09 1592
返回操作包括：顶部导航、右滑手势、安卓物理返回键和调用 navigateBack 接口。本次项目为uniapp开发，原生小程序也可以参考这两个方法。这是一个类似弹框的组件，具体参数可以去官网查看。缺点：无法自定义样式、按钮文字及样式。优点：可以自定义返回框。
微信小程序 监听手势滑动切换页面
03-29
1.对应的xml里写上手势开始、滑动、结束的监听：view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" /view2.js: view plain copyvar touchDot = 0;//触摸时的原点 ...       1.对应的xml里写上手势开始、滑动、结束的监听：   <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="
微信小程序开发中的手势识别和触摸事件处理
最新发布
2401_85625565的博客
06-15 245
微信小程序开发中的手势识别和触摸事件处理非常重要，可以通过触摸事件处理函数或手势库来实现各种手势的识别，并进行相应的处理。微信小程序开发中的手势识别和触摸事件处理是开发小程序过程中非常重要的一部分，本文将详细介绍微信小程序中手势识别和触摸事件处理的内容，并提供代码案例加以说明。手势识别指的是通过用户的手势动作来判断用户的意图，常见的手势包括点击、长按、滑动、缩放等。除了使用触摸事件处理函数外，我们还可以使用手势库来实现手势识别，手势库可以帮助我们更方便地识别各种手势，并提供更多的功能和配置选项。
微信小程序自带返回键跳转设置(安卓返回也适用)
weixin_34261415的博客
07-09 1393
使用onUnload 监听页面卸载之后发生的事情 onUnload:function(){ wx.redirectTo({ url: '../index/index' }) wx.navigateTo({ url: '../index/index' }) wx.switchTab({ url: '.....
微信小程序-手势处理（上、下、左、右）
qq_39548988的博客
11-28 1436
定义变量 var touchStartX = 0;//触摸时的原点 var touchStartY = 0;//触摸时的原点 var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动 var interval = "";// 记录/清理时间记录 var touchMoveX = 0; // x轴方向移动的距离 var touchMoveY = 0; // y...
小程序点击返回提示
weixin_44671184的博客
08-12 317
11
右滑手势返回关闭？我来告诉你怎么解决？
m0_57489910的博客
10-12 682
帮你解决冷门知识！
详解解决小程序中webview页面多层history返回问题
01-03
小程序开发中遇到的问题：小程序中嵌套了一个webview页面，webview页面中有静默授权（A1页面静默授权后重定向到A2页面），点小程序原生的返回按钮会返回到A1页面，然后页面就会反复静默授权 预期表现：点小程序原生...
微信小程序去除左上角返回键的实现方法
10-15
总结来说，微信小程序去除左上角返回键的实现主要依赖于选择合适的页面跳转方式，如`wx.redirectTo`，以及调整页面配置。在实际开发中，应根据业务需求和用户体验来决定是否隐藏返回键，确保用户能够顺畅地在小程序...
微信小程序 手势解锁 (源码)
05-31
微信小程序 手势解锁 (源码)微信小程序 手势解锁 (源码)微信小程序 手势解锁 (源码)微信小程序 手势解锁 (源码)微信小程序 手势解锁 (源码)微信小程序 手势解锁 (源码)微信小程序 手势解锁 (源码)微信小程序 手势...
微信小程序 手势解锁（截图+源码）
05-13
微信小程序 手势解锁（截图+源码）微信小程序 手势解锁（截图+源码）微信小程序 手势解锁（截图+源码）微信小程序 手势解锁（截图+源码）微信小程序 手势解锁（截图+源码）微信小程序 手势解锁（截图+源码）微信小...
微信小程序 检测手势 左滑 右滑
anderson30的博客
09-12 353
【代码】微信小程序 检测手势 左滑 右滑。
【微信小程序】滑动手势处理
waillyer的博客
08-16 2328
import React, { useState } from 'react'; import { View } from '@tarojs/components'; import { useDidShow } from '@tarojs/taro'; const PageTouch = ({ children, handlePreviousPage, handleNextPage }) => { const [touchStart, setTouchStart] = useState([0
小程序阻止手机自带的滑动返回退出事件（uni-app，微信小程序，page-container）
weixin_47211345的博客
03-11 5744
阻止手机自带滑动返回事件的需求实现 和 page-container的使用
微信小程序监听用户操作手势，左滑右滑上滑
葫芦娃y的博客
01-12 1773
微信小程序监听用户操作手势，左滑右滑上滑
了解过微信小程序手势滑动吗？
热门推荐
主要领域：前端开发
08-07 1万+
wxml: <view class="duration-touch-view" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" > </view> index.js: var touchStartX = 0;//触摸时的原点 var touchStart...
微信小程序左上角返回按钮跳转到指定页面
u012746918的博客
01-18 1492
在当前页面的 onUnload 执行页面跳转 onUnload: function () { wx.reLaunch({ url: ‘…/logs/logs’ }) }, 代码讲解：监听页面卸载的函数，把页面重定向到指定的 页面； ...
微信小程序解决多级页面返回及实现返回时弹出层提示
qiansitong的博客
07-25 1574
在微信基础库2.16.0以后开始支持page-container组件，通过这个组件可以对右滑手势返回、安卓物理返回键和navigateBack返回三种操作进行控制。使用下列代码可以实现点击页面返回、右滑手势返回、安卓物理键返回直接返回两级，首次点击返回动作关闭的是page-container组件。也可通过该方法实现返回前页面提示效果。
微信小程序阻止手势滑动返回上一页的例子
04-29
可以通过在小程序页面的onLoad函数中设置： ```javascript wx.hideHomeButton(); // 隐藏返回首页按钮 wx.hideBackHome(); // 隐藏返回上一页按钮 ``` 同时，在小程序的app.json文件中设置： ```json { "window...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小张很嚣张～

支持一下小老弟吧～

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值