津门老刘 發表於 2020-12-4 14:59:00

uni-app 监听返回按钮

<p>前置条件:</p>
<ol class="list-paddingleft-2">
<li>
<p>开发环境:windows</p>
</li>
<li>
<p>开发框架:uni-app , H5+,nativeJS</p>
</li>
<li>
<p>编辑器:HbuilderX 2.8.13</p>
</li>
</ol>
<p>&nbsp;&nbsp; &nbsp;4. 兼容版本:安卓,IOS已作测试</p>
<p>进入正题:</p>
<p>文档地址uni-app:</p>
<p>https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f</p>
<h1>uni-app自定义返回逻辑教程:https://ask.dcloud.net.cn/article/35120</h1>
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">onBackPress(e){
console.log("监听返回按钮事件",e);
uni.navigateTo({
    url:"/pages/details/details?type=2"
})
// 此处一定姚要return为true,否则页面不会返回到指定路径
return true;
}
</pre>
</div>
<p>2.1说明:</p>
<p>当用户进行以下操作时,会触发该函数:</p>
<ul class="list-paddingleft-2">
<li>
<p>Android 实体返回键 (<code>from = backbutton</code>)</p>
</li>
<li>
<p>顶部导航栏左边的返回按钮 (<code>from = backbutton</code>)</p>
</li>
<li>
<p>返回 API,即&nbsp;<code>uni.navigateBack()</code>&nbsp;(<code>from = navigateBack</code>)</p>
</li>
<li>
<p>只有在该函数中返回值为 true 时,才表示不执行默认的返回,自行处理此时的业务逻辑。</p>
</li>
<li>
<p>当不阻止页面返回却直接调用页面路由相关接口(如:uni.switchTab)时,可能会导致页面显示异常,可以通过延迟调用路由相关接口解决。</p>
</li>
<li>
<p>不返回或返回其它值,均会执行默认的返回行为。</p>
</li>
<li>
<p>H5 平台,顶部导航栏返回按钮支持&nbsp;<code>onBackPress()</code>,浏览器默认返回按键及Android手机实体返回键不支持&nbsp;<code>onBackPress()</code></p>
</li>
<li>
<p>暂不支持直接在自定义组件中配置该函数,目前只能是在页面中来处理。</p>
</li>
</ul>
<p> </p><br><br>
来源:https://www.cnblogs.com/ts119/p/14085862.html
頁: [1]
查看完整版本: uni-app 监听返回按钮