uniapp vue3版本的一些小细节!

发布于:2025-06-27 ⋅ 阅读:(18) ⋅ 点赞:(0)

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');
    })

后续慢慢添加!


网站公告

今日签到

点亮在社区的每一天
去签到