首页 / 知识
如何优化mui列表跳转到详情页
2023-04-11 15:15:00
实施方法
通过预加载提前加载详情页；
mui.fire触发详情页面指定事件，调用ajax更新数据；
一、预加载的实现（两种方法）：
官方地址
预加载方法一：
通过mui.init方法中的preloadPages参数进行配置。
mui.init({
preloadPages:[
{
url:prelaod-page-url,id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制});
在使用中，可能用不到那么多的属性，下面是我的使用案例：
mui.init({preloadPages:[{
url:'account_detail.html',
id:'account_detail.html'
}]
});
只需要设置url和id就可以，详情页需要的参数在使用mui.fire的时候传过去；
预加载方法二：
通过mui.preload方法预加载。
varpage=mui.preload({url:new-page-url,id:new-page-id,//默认使用当前页面的url作为id
styles:{},//窗口参数
extras:{}//自定义扩展参数});
预加载两种方法对比：
1.方法一为异步创建预加载页面，并且可以同时创建多个页面，但是由于是异步的，因此不能立即获取到创建的webview对象，并且需要使用plus.webview.getWebviewById来获取到创建的webview;
2.方法二为同步创建预加载页面，可以在创建后同步获取到webview,即方法二的“page”变量；但是方法二只能同时创建一个预加载的页面；
二、通过mui.fire触发自定义事件
原理：两个同时存在的webview之间可以通过mui.fire方法来触发另一个webview中的自定义事件，因此，我们可以在详情页中创建一个自定义事件，监听列表页中的mui.fire方法。
mui.fire(target,event,data)
target:详情页（列表页中预加载的详情页）的webview;
event:详情页中监听的自定义事件；
data:需要传给详情页的参数；
1.在详情页创建并监听自定义事件“account_bid_detail_fire”：
$.plusReady(function(){/**
*实例化获取接口数据方法
*/
varget_bid_detail=newGET_BID_DETAIL();window.addEventListener('account_bid_detail_fire',function(event){//获得事件参数
varid=event.detail.id;console.log(JSON.stringify(event.detail));//触发ajax，根据id向服务器请求当前列表详情
get_bid_detail.init(id);
});
});
mui.fire从列表页传的参数都在event.detail中，可以输出具体查看；
2.在列表页触发“account_bid_detail_fire”事件：
mui(document.body).on("tap",".account_bid_list",function(){//触发详情页面的account_bid_detail_fire事件
vardetail_webview=null;if(!detail_webview){//判断webview是否存在
detail_webview=plus.webview.getWebviewById("account_detail.html");
}//detail_webview是在列表页中预加载的页面；
mui.fire(detail_webview,'account_bid_detail_fire',{id:_this.dataset.id
});//打开详情页面
mui.openWindow({id:"account_detail.html",//详情页webview的id
show:{aniShow:'none',//页面不显示动画
duration:'0'//
}
});
});
接下来，在列表页点击列表的时候就可触发详情页的“account_bid_detail_fire”事件，然后触发详情页的ajax来更新请求的数据；
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程：https://www.jianshu.com/p/e8197d4d9880
本文转载自中文网 |
最新内容
相关内容
python如何使输出换行
python如何使输出换行，培训，结果，两个，方法，引号，函数，同行，以上，时候，方式，python的print()函数输出时，通常输出结果是整行显示出来的，这时候
python如何读取文件
python如何读取文件，培训，数据，文件，信息，有限，操作系统，对象，磁盘，函数，表示，读写文件前，我们先必须了解一下，在磁盘上读写文件的功能都是由操
python如何安装一个模块
python如何安装一个模块，培训，工具，模块，方式，文件夹，源码，本文，下面，以上，之后，下面介绍几种安装Python模块的几种方式easy_install方式先下
python如何注释代码行
python如何注释代码行，代码，培训，位置，注释，信息，内容，中文，程序，声明，语法，python中使用井号(‘#’)作为单行注释的符号，语法格式为：#注释内容
python如何构建字典
python如何构建字典，培训，数据，数字，字典，实例，以上，括弧，结果，冒号，用字，python构建字典的方法：字典是另一种可变容器模型，且可存储任意类型对
python如何定义函数
python如何定义函数，培训，概念，代码，环境，函数，定义，语句，括号，结果，冒号，函数的概念：函数是组织好的、具有一定功能的代码片段。在Python中，定
python如何截断字符串
python如何截断字符串，培训，位置，字符，字符串，索引，倒数，依此类推，方括号，后面，表示，字符串本质上就是由多个字符组成的，Python允许通过索引来
python怎么打印列表
python怎么打印列表，代码，培训，数字，位置，列表，参数，语句，索引，结果，序列，序列是Python中最基本的数据结构。序列中的每个元素都分配一个数字
python如何编译
python如何编译，培训，指令，脚本，目录，路径，模块，命令，文件，大小写，文件名，1、说明编译python程序就是把python脚本转换成操作系统中的可执行
pythonid函数如何运行
pythonid函数如何运行，培训，地址，代码，对象，函数，内存，类型，可能会，整数，字符串，id(object)功能：返回的是对象的“身份证号”，唯一且不变，但在不
python怎么使用列表
python怎么使用列表，位置，培训，公式，列表，元素，表示，末尾，切片，倒数，顺序，python列表的简单操作1.在列表末尾添加元素：sth.append()2.在列表中
python如何安装pip
python如何安装pip，培训，情况，通用，工具，脚本，以下，版本，命令，以上，管理工具，pip是一个现代的，通用的Python包管理工具[1]。提供了对Python包