1,生命周期的引用
import {
onShow,
onHide,
onLoad
} from "@dcloudio/uni-app"
onShow(() => {
showLog('onShow')
})
onLoad((options) => {
showLog(' onLoad')
})
需要引入,才可以调用
2,全局引入css
在main.js或者ts中,导入就可以
// 例如引入全局CSS文件
import './util/baseCss.css'
3,功能模拟:列表页面,跳转到详情页面,详情页面操作完功能后,要返回列表页面,并且还需要把列表页面中操作的这条数据删除,其他的数据不变!
在列表页面的onShow方法中!
onShow(() => {
showLog('列表页 onShow')
uni.$on("refresh_repair", res => {
showLog("收到刷新消息,消息为");
showLog(res);
showLog("刷新前长度为:" + indexList.value.length)
let tabIndex = res.tabIndex
//去除array中的这个id的值
const index = indexList.value.findIndex(item => item.id === res.tabIndex)
if (index > -1) {
indexList.value.splice(index, 1)
}
showLog("刷新后长度为:" + indexList.value.length)
showLog(indexList.value)
// 清除监听
uni.$off('refresh_repair');
})
})
在详情页面!
uni.$emit("refresh_repair", {
tabIndex: deviceValue.value.repairId
});
uni.navigateBack({
delta: 1
})
都监听key为refresh_repair,是根据对应的id唯一值来判断删除item。
切记!!!!!!
在onUnload,也需要清除监听,这是因为你有可以没有进入详情页就返回了,下次在进入的时候,又监听上了refresh_repair,导致会多次监听。到时候数据就会多次返回了!
onUnload(() => {
showLog('列表页 onUnload')
uni.$off('refresh_repair');
})
后续慢慢添加!