微信小程序返回上一頁監聽

本文實現的是微信小程序在返回上一頁時獲取通知并自定義業務。

最簡單的實現:

使用?wx.enableAlertBeforeUnload()?

優點:快速接入

缺點:手勢不能識別、無法自定義彈窗內容(僅詢問)

方法二:

page-container?+ 自定義返回點擊

page-container有個好處,能識別返回操作包括三種情形,右滑手勢、安卓物理返回鍵和調用?navigateBack?接口

唯一的缺點就是PC端打開小程序時,點擊左上角的返回無法觸發。

直接上代碼(使用了TDesign 微信小程序組件庫,可自行替換):

wxml:

<view><page-container show="{{visible}}" overlay="{{false}}" bind:beforeleave="onBeforeLeave"></page-container><view class="block"><t-navbart-class-placeholder="t-navbar-placeholder"t-class-content="t-navbar-content"title="標題文字2"t-class-title="nav-title"><view slot="left"><t-iconsize="48rpx"bind:tap="onNavigateBack"aria-role="button"aria-label="返回"name="chevron-left"/></view></t-navbar></view><text>test</text><t-dialogvisible="{{imageOnMiddleWithImage}}"confirm-btn="{{ {content: '確定', variant: 'base' } }}"cancel-btn="取消"bind:confirm="confirnDialog"bind:cancel="closeDialog"><t-image slot="top" id="loading-img" shape="round" width="72" height="72" /></t-dialog>
</view>

js:

Page({/*** 頁面的初始數據*/data: {visible: true,imageOnMiddleWithImage: false,backTime: 0,},closeDialog() {this.setData({visible: true, // 點取消,重新展示該頁面imageOnMiddleWithImage: false,backTime: 1,});},confirnDialog() {wx.navigateBack({delta: 1});},onBeforeLeave() {if (this.data.backTime > 0) {this.confirnDialog()return;}this.setData({imageOnMiddleWithImage: true,});},onNavigateBack() {this.onBeforeLeave()}
})

使用自定義返回鍵,監聽點擊事件;

使用page-container特性,處理所有非點擊返回情況下的返回事件。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/82786.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/82786.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/82786.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Excel 統計某個字符串在指定區域出現的次數

【本文概要】 Excel 統計某個字符串在指定區域出現的次數&#xff1a; 1、Excel 統計一個單元格內的某字符串的出現次數 2、Excel 統計某一列所有單元格內的某字符串的出現次數 3、Excel 統計某一區域所有單元格內的某字符串的出現次數 1、Excel 統計一個單元格內的某字符串的出…

生物化學:藥品藥物 營養和補充劑信息 第三方認證信息 常見誤區 匯總

常見維生素和礦物質成分表 成分名稱好處副作用&#xff08;超量或敏感情況&#xff09;運作方式推薦日劑量&#xff08;成人&#xff09;劑量說明維生素A&#xff08;視黃醇&#xff09;視力、免疫、皮膚健康過量可致肝損傷、頭痛、脫發調節視網膜功能、細胞分化700–900 g RA…

mock庫知識筆記(持續更新)

文章目錄 mock簡介導入方式參數簡介使用場景&#xff08;待更新&#xff09;常見問題總結&#xff08;待更新&#xff09;Python代碼官網 mock簡介 mock是一個模擬對象庫&#xff0c;具有模擬其他python對象的功能&#xff0c;還能指定模擬對象的返回值和設置模擬對象的屬性。…

扇形 圓形 面積公式

? 一、圓的面積公式 全圓面積&#xff1a; A circle π r 2 A_{\text{circle}} \pi r^2 Acircle?πr2 ? 二、扇形的面積公式&#xff08;兩種制式&#xff09; 弧度制&#xff1a; A sector 1 2 r 2 θ A_{\text{sector}} \frac{1}{2} r^2 \theta Asector?21?r2θ …

怎樣將win11+ubuntu雙系統的ubuntu從機械硬盤遷移至固態硬盤(1)

將 Ubuntu 從機械硬盤遷移到固態硬盤是一個涉及多個步驟的過程。以下是一個基本的遷移指南&#xff1a; 1. 前期準備 1.1 備份數據&#xff1a; 確保你已備份數據&#xff0c;以防止在遷移過程中出現意外導致任何數據丟失。 1.2 固態硬盤安裝&#xff1a; 確保固態硬盤正確…

js中common.js和ECMAScript.js區別

以下是關于 CommonJS 和 ECMAScript Modules&#xff08;ESM&#xff09;的詳細對比分析&#xff0c;包含底層原理和示例說明&#xff1a; &#x1f9e9; 核心差異對比表 特性CommonJSES Modules來源Node.js 社區規范ECMAScript 語言標準加載方式動態加載&#xff08;運行時解…

玻纖效應的時序偏差

隨著比特率繼續飆升&#xff0c;光纖編織效應時序偏移正成為一個越來越嚴重的問題。對于 5GB/s 及以上的信號傳輸速率&#xff0c;它實際上會毀了您的一天。例如&#xff0c;左圖顯示由于 12.7 英寸的纖維編織效果&#xff0c;5GB/s 的接收眼完全閉合。使用 Agilent ADS 軟件進…

異步上傳石墨文件進度條前端展示記錄(采用Redis中String數據結構實現)

事件起因是客戶現場需要從石墨文檔中獲取文件信息&#xff0c;文件信息存在存在多個&#xff0c;進行批量上傳。為了用戶的友好型體驗&#xff0c;需要做進行條展示的方式&#xff0c;具體實現見下文… 上傳流程介紹 石墨文檔支持從鏈接&#x1f517;方式獲取文件信息&#xf…

3D建模的全景圖譜:從55個工具到元宇宙的數字革命

3D建模已從專業工程師的工具箱演變為全民創作的數字語言。從代碼驅動的精確建模到AI自動生成紋理&#xff0c;從開源協作到程序化生成城市&#xff0c;技術正重塑我們創造虛擬世界的方式。本文將系統解析55個核心3D建模工具/插件&#xff0c;涵蓋在線編輯器、開源軟件、程序化生…

jsrpc進階模式 秒殺js前端逆向問題 burp聯動進行爆破

案例演示 思路就是 這個 jsrpc遠程加載加密函數的方法就是 在js代碼中進行插入一個 遠程加載的代碼 從而實現 &#xff1a; 第一步還是使用 js_tools 進行 查找算法的位置 這個可以幫助我們找到明文>密文 加密算法函數的位置 因為這個需要我們進行js前端代碼的修改 所以…

基于BERT-Prompt的領域句子向量訓練方法

基于BERT-Prompt的領域句子向量訓練方法 一、核心原理:基于BERT-Prompt的領域句子向量訓練方法 論文提出一種結合提示學習(Prompt Learning)和BERT的領域句子向量訓練方法,旨在解決裝備保障領域文本的語義表示問題。核心原理如下: 以下通過具體例子解釋傳統詞向量方法和…

Python PyMySQL

1.PyMySQL是什么 是Python操作mysql的一個包 2.PyMySQL使用基本步驟 2.1 創建連接 conn pymysql.connect(host10.248.53.148,password123456,port3306,userroot,databasetest_database,charsetutf8)2.2 游標 2.2.1 什么是游標 游標實際上是一種能從包括多條數據記錄的結果…

OC—UI學習-1

OC—UI學習 UILabel UILabel是UIKit框架中的一個類Label主要參數 text&#xff1a;文本frame&#xff1a;位置框架backgroundcolor&#xff1a;背景顏色textAlignment&#xff1a;設置文本在Label中的位置textColor&#xff1a;文本顏色shadowColor&#xff1a;陰影顏色shado…

【應用密碼學】實驗七 Hash函數——SM3

一、實驗要求與目的 理解哈希函數的基本原理及在密碼學中的應用&#xff1b;掌握國密哈希標準 SM3 的算法結構&#xff1b;編程實現 SM3 摘要算法&#xff0c;包括消息填充、消息擴展、壓縮函數及摘要輸出&#xff1b;對中間變量 W、W′ 和 A~H 的迭代過程進行可視化&#xff…

進行性核上性麻痹護理之道:助力患者舒適生活

進行性核上性麻痹是一種緩慢進展的神經退行性疾病&#xff0c;主要影響患者的運動、語言和吞咽功能&#xff0c;給日常生活帶來諸多不便。除了遵醫囑接受藥物或物理治療&#xff0c;科學的健康護理對延緩病情發展、提升生活質量尤為重要。 運動康復是護理的關鍵環節。由于患者常…

5G 核心網中 NRF 網元的功能、接口及參數詳解

引言 在 5G 核心網的架構體系里,網絡存儲功能(Network Repository Function,NRF)占據著關鍵地位,承擔著核心網網絡功能(Network Function,NF)的注冊、發現以及服務管理等重要任務,為整個 5G 網絡的高效穩定運行提供了堅實支撐。接下來,讓我們深入剖析 NRF 網元在注冊…

HUAWEI交換機配置鏡像口驗證(eNSP)

技術術語&#xff1a; 流量觀察口&#xff1a;就是我們常說的鏡像口&#xff0c;被觀察的流量的引流目的端口 流量源端口&#xff1a;企業生產端口&#xff0c;作為觀察口觀察對象。 命令介紹&#xff1a; [核心交換機]observe-port [觀察端口ID或編號&#xff08;數字&am…

Spring AI Alibaba 發布企業級 MCP 分布式部署方案

作者&#xff1a; 影子&#xff0c;劉宏宇&#xff0c;劉軍 Spring AI 通過集成 MCP 官方的 java sdk&#xff0c;讓 Spring Boot 開發者可以非常方便的開發自己的 MCP 服務&#xff0c;把自己企業內部的業務系統通過標準 MCP 形式發布為 AI Agent 能夠接入的工具&#xff1b;…

Redis實戰-緩存篇(萬字總結)

前言&#xff1a; 今天結合黑馬點評這個項目&#xff0c;講下有關Redis緩存的一些內容&#xff0c;例如緩存更新策略&#xff0c;緩存穿透&#xff0c;雪崩和擊穿等。 今日所學&#xff1a; 什么是緩存緩存更新策略緩存穿透緩存雪崩緩存擊穿緩存工具封存 目錄 1.什么是緩存…

openFuyao開源發布,建設多樣化算力集群開源軟件生態

openFuyao 開源發布 隨著 AI 技術的高速發展&#xff0c;算力需求呈爆發式增長&#xff0c;集群已成為主流生產方式。然而&#xff0c;當前集群軟件生態發展滯后于硬件系統&#xff0c;面臨多樣化算力調度困難、超大規模集群軟件支撐不足等挑戰。這些問題的根源在于集群生產的…