mui列表跳轉到詳情頁優化方案

因為列表頁到詳情頁是多對一的形式，即列表頁的多條資料列表對應的是乙個詳情頁，只是資料不同而；因此，可以在載入列表頁時預載入詳情頁，即建立乙個詳情頁的webview,但是不顯示出來，點選列表的時候在通過特定方法觸發詳情頁的事件，獲取響應資料，這種做法可以極大程度的縮短響應的時間。

通過預載入提前載入詳情頁；

mui.fire 觸發詳情頁面指定事件，呼叫ajax更新資料；

預載入方法一：

通過mui.init方法中的preloadpages引數進行配置。

mui.init(,//視窗引數

extras:{},//自定義擴充套件引數
subpages:[{},{}]//預載入頁面的子頁面}],
preloadlimit:5
//預載入視窗數量限制(一旦超出,先進先出)預設不限制
});

mui

.init(]
});

預載入方法二：

通過mui.preload方法預載入。

var page = mui.preload(,//視窗引數

extras:{}//自定義擴充套件引數
});

1.方法一為非同步建立預載入頁面，並且可以同時建立多個頁面，但是由於是非同步的，因此不能立即獲取到建立的webview物件，並且需要使用plus.webview.getwebviewbyid來獲取到建立的webview;

2.方法二為同步建立預載入頁面，可以在建立後同步獲取到webview,即方法二的「page」變數；但是方法二只能同時建立乙個預載入的頁面；

原理：兩個同時存在的webview之間可以通過mui.fire方法來觸發另乙個webview中的自定義事件，因此，我們可以在詳情頁中建立乙個自定義事件，監聽列表頁中的mui.fire方法。

mui.fire( target , event , data )

target:詳情頁（列表頁中預載入的詳情頁）的webview;

event:詳情頁中監聽的自定義事件；

data:需要傳給詳情頁的引數；

$.plusready(function() );

});

2.在列表頁觸發「account_bid_detail_fire」事件：

mui(document.body).on("tap", ".account_bid_list", function() 

//detail_webview是在列表頁中預載入的頁面；
mui.fire(detail_webview, 'account_bid_detail_fire', );
//開啟詳情頁面 
mui.openwindow(
});});

文末福利：

Vue通過id跳轉到商品詳情頁

方法一 通過 我要跳轉，別攔我首頁列表 在這裡我用a標籤進行跳轉，在vue裡面使用 router link to class around router link 商品詳情頁 請求介面 created function catch function error 1 ul 2 li v for ite...

小程式 跳轉詳情頁

注 凡是data 自定義值 的為自定義屬性值 必須是data開頭 例 data postd event.currenttarget.dataset 所有自定義屬性的集合 注意 data postad和後台定義的postid不能重名，否則得到undefind a post.wxml 定義跳轉事件 on...

spring boot 設計列表頁詳情頁HTML

1.關於退出功能 在layer中可以直接繫結事件不用再呼叫關閉網頁事件，直接利用window.location.href就可以控制在當前頁面開啟了 2.實現登入時獲取本地資料庫 中標公告的 list集合 3.thymeleaf模板迴圈輸出 list列表頁 方法格式為 class a3 河北省環境監測...