fairy-domain

Miniprogram List Local Update

Sat, 11 Feb 2023 21:45:42 +0800

小程序列表经常遇到需要局部刷新的需求，具体场景如下：

列表单项带有操作按钮，操作后需刷新列表数据，且列表保持不滚动，仅需更新当前项的数据，分页需要保持；
从列表单项进入详情页面，在详情页面进行操作后，再次返回列表时，列表数据需要更新，且列表保持不滚动，仅需更新当前项的数据，分页需要保持；

问题思考和方案：

针对第一条，相对来说比较好处理，只要在单项操作后，接口返回更新后的数据，我们在现有列表中找出操作项数据，进行数据替换即可；这里需要注意，除了替换，还有可能是移除（状态变了，不在当前列表了或者真实删除了），需要同步移除本地列表对应的数据项；
第二条比较麻烦，在详情页操作了，返回列表时需要更新或者删除列表中具体一项，首先想到的就是通过 EventChannel 在列表页和详情页建立通讯，表面看起来好像确实能解决，但仔细推敲，其实是行不通滴；假如操作是在详情页之后的页面中进行，返回详情页需要更新，再返回列表页还需要更新，这里链路一长，就不靠谱了，很多列表都有类似的需求，太麻烦；

具体解决方案：

针对第一条，列表单项更新或者删除，以下为示例代码：

Page({
 data: {
 listData: [],
 },
 // 更新列表项
 updataListItem(item, del = false) {
 // 通过单项id, 找到该项在列表数组中的下标
 const index = this.data.listData.findIndex(v => v.id === item.id);
 if (index > -1) {
 const updataKey = `listData[${index}]`;
 // 不要通过filter过滤出新的列表，再更新整个列表，效率低，不推荐；应该只更新对应单项
 this.setData({
 optionItem: item,
 [updataKey]: del ? null : item
 });
 } else {
 // console.log("更新列表时，未找到对应项")
 }
 }
})

第二条我们的策略是在离开列表页面时，保持当前操作项的数据，在页面再次 show 时通过当前操作项查询最新的数据，并替换列表项；实现代码如下：

Page({
 data: {
 listData: [],
 optionItem: {}
 },
 // 页面显示时
 async onShow() {
 // 操作项数据不为空时，查询当前项的最新数据
 if (JSON.stringify(this.data.optionItem) !== "{}") {
 await this.queryItemDataAndUpdataList(this.data.optionItem);
 }
 },
 // 查看详情页面
 handleGoDetails(event) {
 const optionItem = event.currentTarget.dataset.item;
 this.setData({
 optionItem
 });
 wx.navigateTo({
 url: `/pages/details/details?id=${optionItem.id}`,
 });
 },
 // 通过id和列表查询条件获取最新数据，并更新列表数据
 async queryItemDataAndUpdataList(item) {
 // 省略实现代码 ...
 this.updataListItem(itemData); // this.updataListItem(itemData, true);
 },
 // 更新列表项
 updataListItem(item, del = false) {
 // 通过单项id, 找到该项在列表数组中的下标
 const index = this.data.listData.findIndex(v => v.id === item.id);
 if (index > -1) {
 const updataKey = `listData[${index}]`;
 // 不要通过filter过滤出新的列表，再更新整个列表，效率低，不推荐；应该只更新对应单项
 this.setData({
 optionItem: item,
 [updataKey]: del ? null : item
 });
 } else {
 // console.log("更新列表时，未找到对应项")
 }
 }
})

注意事项：

分页不能通过 page 和 size 这种简单实现，需要更改为通过最后一条查询指定条数的方式实现；
列表存在不必要获取数据的问题（列表进入详情，详情页面无任何操作，再次返回，其实无需再次获取当前操作项的数据），但无伤大雅；

Image Preload

Thu, 11 Mar 2021 16:03:41 +0800

图片预载的简单实现，配合 Promise 还是很方便滴！

function loadResource(data) {
 return new Promise((reslove, reject) => {
 Promise.all(
 data.map(
 ({ name, path }) =>
 new Promise((resolve, reject) => {
 const img = new Image();
 img.src = path;
 img.addEventListener("load", () => {
 resolve({ [name]: img });
 });
 img.addEventListener("error", reject);
 })
 )
 )
 .then(list => {
 reslove(
 list.reduce((prev, curr) => Object.assign(prev, curr)),
 {}
 );
 })
 .catch(reject);
 });
};

使用方法如下：

/* name：为图片资源名称，加载完成后引用资源时使用
 path： 图片路径
*/
const imagesList = [{name:"logo",path:""}];

loadResource(imagesList).then(res=>{

 ...

}).catch(err=>{
 console.log(err);
})

关于我自己

Thu, 04 Feb 2021 10:05:28 +0800

概述

偏执而又执着的业余前端工程师，热爱计算机技术，自学编程技术，对新技术和科技类内容有浓厚的兴趣。

经历

2014/2015年就职杭州鼎商信息科技有限公司，任职web前端工程师；
2015/2017年就职杭州博采网络科技股份有限公司，任职新媒体事业部web前端工程师；
2017/2019年就职杭州云暴科技有限公司，任职web前端工程师兼前端主管；
2019/至今就职北京军地联合网络技术中心西安研发中心，任职web前端工程师兼前端主管；

技能

精通HTML，CSS，Javascript 等web基础技术；
熟练使用 Node，Nginx，Mongodb，docker等技术；
熟悉主流前端框架 React，Vue，Svelte，小程序等技术；
熟悉Android基础开发；

方向

偏执和执着的人，总是再试图挑战自我；努力朝着全栈工程师靠近～

联系我

wechat: hgq_tx / qq: 398263326

Android Fullscreen

Thu, 04 Feb 2021 09:22:07 +0800

沉浸状态栏应用Android应用中很常见,作为新手自己找了很多资料，并无比较完美的结果，也问了身边做Android的大佬，给出的答案也理想，自己各种bing，最终终于找个了满意的结果。具体实现代码（Kotlin）如下：


if (Build.VERSION.SDK_INT >= 30) {
 window.setDecorFitsSystemWindows(false)
} else {
 @Suppress("DEPRECATION")
 window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
 or View.SYSTEM_UI_FLAG_LAYOUT_STABLE)
}

全屏后 Toolbar 最好使用 AppBarLayout 包裹，设置 AppBarLayout 背景颜色即可完成顶部的 Toolbar 大概如下：

<com.google.android.material.appbar.AppBarLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:fitsSystemWindows="true">

 <androidx.appcompat.widget.Toolbar
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:minHeight="?attr/actionBarSize"
 android:overScrollMode="always"
 app:layout_scrollFlags="snap|exitUntilCollapsed"
 app:title="@string/nav_giftware_title"
 app:titleTextColor="@color/white" />

</com.google.android.material.appbar.AppBarLayout>