wex5 實戰 單頁模式下的多頁面資料同步

2022-07-17 20:48:12 字數 2080 閱讀 3753

在wex5官方教程中,關於多頁模式與單頁模式進行了對比。兩者最大的區別在於:

1 web載入速度,單頁模式快於多頁模式

2  多頁模式對載入機制進行了預載入,一次載入之後再次載入,就會加快。

但是,由於專案需要,多頁模式無法滿足我對全域性變數的繫結屬性的獲取(大家看我全域性可觀察變數博文),所以對頁面進行了全部重構,重構之後,web載入的響應速度大大提高,沒有了明顯的卡頓感。但是,也帶來了更嚴重的問題,頁面資料不同步。

起先以為是坑,其實是對頁面的載入機制不了解。

先看一下不同步的情況:

新增一條發貨單

返加首頁,問題來了,貨單沒有重新整理,沒有新增

這就是我們今天要著手解決的問題。首先告訴大家,解決之道很簡單,簡單到想都想不到。關鍵是,我們今天以解決方法和思維模式為重點。

二   解決思路:

1,先判斷data有沒有新增。

方法簡單,先放到modeload裡,發現,只能載入一次!!!載入後再從別的頁面回來,也不行。       

也就是說,別的頁面新增或刪除修改再跳轉回來,modeload裡的方法只執行一次。

手動加乙個按鈕,看下,data有沒有新增,再來試一下:

悲劇發生了,手動重新整理,居然也不能重新整理data,條數還是5條!!!!

在單頁模式裡,小專案也有幾十個頁面,頁面單換來換去,如果有資料操作,其它頁面不能響應,資料不同步, 這個專案,估計沒法再往下進行了。

但是,我發現,每次web重啟動後,data就自動重新整理到了最新狀態。難道是頁面重新整理問題?

2  頁面重新整理

首先想到了window.location.reload().

一試,淚崩,整個web重新啟動了。不行。

3. div重新整理

群裡很多朋友問div重新整理的問 題,估計也是想強制重新整理頁面內容。

不行。4.windowndialog重新整理

本來用的單頁模式,再裝回到多頁模式,多此一舉。

一次次的測試,死的心都有了。明明data資料更新了,非要刷什麼頁面呢?

data更新?

data更新?

再回到原點想問題,想想,還有**能時實接收資料????

想想想想

想到了頁面傳參與收參paramsreceive

對,就是這個。

三  頁面同步方法

1 在頁面半閉時,傳參,用於觸發目標頁面的引數接收動作

2  目標頁面,接參,並重新整理data

再來測試,data和list同步進行了響應和更新。

之前用了很長時間來刷頁面,刷list,刷div,刷視窗,再如此處理,好像白學了。沒想到解決方法這麼簡單。關鍵是打到問題的根源和實質,需要時間和大量測試。

四 總結:

1  學會分步測試

2 modelparamsrecive具有實時性,無論什麼時候跳轉至頁面,它都在modeload之前進行,只要有參傳進來,就能觸發。充分利用這一點,可以讓data資料實時重新整理。

wex5 教程 頁面左右晃動的處理

一 前言 在用wex5製作頁面時,會遇到頁面左右晃動的問題。如下圖 還有字元超過寬度後的問題 總之頁面晃來晃去,會影響手指觸控。下面分析並解決這個問題。二,問題分析與解決 頁面晃動總的分為兩類 1 boostrap超出頁面 以row和boostrap row為例 經過對比,boostrap row比...

wex5 實戰 星級評分的輸入與輸出

群是萬能的,有人問我星級評分的輸入問題,我一想,案例裡模板裡有乙個五星評分,是個顯示效果。如果點選五星,如何實現輸入呢?其實很簡單。一 效果演示 點選幾顆星,輸入星級。二 設計思路 延用案例裡的五星顯示,繫結到data星級欄位上,把range 滑動條元件也繫結到星級欄位上,放到星星上,設定為全透明即...

前端的單頁面模式SPA和多頁面模式MPA

前端部分的搭建,需要考慮使用哪種模式進行頁面之間的跳轉互動,而專案內的頁面互動,不可避免的需要相互之間的資料共享。這就引出了本篇部落格的目的,一起來談談 專案前端部分的構建方式以及資料共享方式。1 方便性 結合開發的時間需求和方便性選擇適合的前端模式 2 效能 在專案的體量比較大,或者某個頁面需要載...