【vue2+uni-app】页面按钮显示延迟卡顿问题的排查和解决

文章描述了在页面滚动时,操作按钮出现延迟和卡顿的问题,通过排查发现是由于计算属性依赖于接口返回的数据动态更新导致的。解决办法是在接口调用后直接设置按钮状态,避免了重复计算。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

页面按钮显示延迟卡顿问题的排查和解决

问题复现

从列表页进入详情页,详情页底部的操作按钮会有卡顿和延迟的情况,如下图所示,同时有关闭和审批操作时,会先出现关闭按钮,再出现审批按钮;有编辑操作时,先闪现关闭按钮,然后关闭按钮消失,出现编辑按钮。
虽然不影响功能,但是对用户来说交互并不友好,所以需要优化一下
在这里插入图片描述

排查思路

样式问题还是逻辑问题

<scroll-view>
	......
</scroll-view>
<view class="option-group-box" v-if="canApproval || canEdit || canClose">
	<view class="option-btn submite-btn" v-if="canApproval" @click="goToApproval">审批</view>
	<view class="option-btn submite-btn" v-if="canEdit" @click="goToEdit">编辑</view>
	<view class="option-btn submite-btn" v-if="canClose" @click="goToClose">关闭</view>
</view>

样式问题排查:
1、给按钮区足够大的固定高度,没有变化
2、按钮区的判断问题,取消对option-group-box的判断,默认展示,没有变化
3、scroll-view区域挤压导致,给scroll-view固定小的高度,没有变化
逻辑问题排查:

 	canApproval() {
		 	return ['approvalPendingList'].includes(this.pageParams.source);
		 },
	canEdit() {
	 	return ['mineSubmitList'].includes(this.pageParams.source) && ['1'].includes(this.pageData.auditStatus + '');
	 },
	 canClose() {
	 	return ['0', '2', '4'].includes(this.pageData.auditStatus + '') && this.permissions['corrective-maintenance-close'];
	 }

审批、编辑、关闭按钮都是通过在计算属性中判断返回,所以在对应计算属性中打断点,发现编辑和关闭按钮会出现多次打断情况,说明这两个操作的计算属性判断需要的字段有变化,导致重新计算属性,DOM重新更新

问题原因

检查代码发现,进入页面后会先调详情接口,获取到缺陷单号后作为参数再调用一个接口,获取最新的缺陷状态和关闭原因等字段,所以除了初始化的时候计算属性会先计算一次,调用第一个详情接口后计算属性会再判断一次,显示对应的按钮,调第二个接口后因为计算属性需要的auditStatus 字段更新了,计算属性还会再判断一次,按钮再次更新,有可能第一次展示了一个按钮,第二个接口判断后不展示了,呈现出类似卡顿和延迟的效果。

页面初始化时执行getFlowDetails,第一次调接口:

	onShow(option) {
		let pages = getCurrentPages();
		let currentPages = pages[pages.length - 1];
		this.pageParams.processInstanceId && this.getFlowDetails();
	},

getFlowDetails方法中接口第一次返回auditStatus ,计算属性更新一次,然后第二次调接口:

async getFlowDetails() {
	this.$modal.loading('加载中...', {
		mask: true
	});
	const processInsId = this.pageParams.processInstanceId || this.auditId;
	try {
		const { code, success, data } = await flowDetail({ processInsId: processInsId });
		if (code === 200 && success) {
			......
			// 基础信息
			this.pageData = {
				......
			};
			......
			serveProcInstForm.faultTicketNo && this.getDetails(serveProcInstForm.faultTicketNo);
		}
		this.$modal.closeLoading();
	} catch (e) {
		console.log(e);
		this.$modal.closeLoading();
	}
},

第二次调接口获取最新的auditStatus ,计算属性再次更新:

getDetails(qXCode) {
	getFailureRepairDetailApi({
		code: qXCode
	}).then((res) => {
		const { code, success, data } = res;
		if (code === 200 && success && data) {
			const { id, auditStatus, updateUserName, closeReason } = data;
			this.pageData = {
				...this.pageData,
				id: id,
				auditStatus: auditStatus,
				......
			};
		
		}
	});
},

解决方法

因为计算属性计算时需要的字段会随着调用两次接口不停更新,所以不能用计算属性来判断按钮的展示,在最后一次接口调用后,数据不再变化的情况下,在判断按钮,就不会出现类似按钮停顿延迟的效果了,具体操作如下:

在data添加按钮结果的响应数据,并给初始值false:

data(){
	return{
		canApproval: false,
		canEdit: false,
		canClose: false,
		......
	}
}
	

在最后一次调用接口的方法getDetails里,接口调用后执行判断操作,结果和响应数据绑定:

getDetails(qXCode) {
	getFailureRepairDetailApi({
		code: qXCode
	}).then((res) => {
		const { code, success, data } = res;
		if (code === 200 && success && data) {
			const { id, auditStatus, updateUserName, closeReason } = data;
			this.pageData = {
				...this.pageData,
				id: id,
				auditStatus: auditStatus,
				......
			};		
			this.canApproval = ['approvalPendingList'].includes(this.pageParams.source);
			this.canEdit = ['mineSubmitList'].includes(this.pageParams.source) && ['1'].includes(this.pageData.auditStatus + '');
			this.canClose = ['0', '2', '4'].includes(this.pageData.auditStatus + '') && this.permissions['corrective-maintenance-close'];			
		}
	});
},

以上,即可实现按钮一次展示不再变化。

效果展示

在这里插入图片描述

<think>好的,我现在需要帮助用户解决关于uni-ui在微信小程序中是否不好用的问题。首先,我要回想用户之前的提问,他遇到了WXSS文件编译错误,可能是在使用uni-app开发微信小程序时遇到的。现在用户询问uni-ui是否不好使,可能是在使用uni-ui组件时遇到了问题,或者听说有兼容性问题。 首先,我需要确定用户的具体情况。用户可能在使用uni-ui时遇到了组件不显示、样式错乱、功能异常等问题。或者他们可能听到别人的评价,担心uni-ui的稳定性。需要从常见问题、兼容性、使用注意事项等方面进行解答。 接下来,我应该考虑uni-ui的基本情况。uni-ui是DCloud官方为uni-app开发的UI组件库,支持多端运行,包括微信小程序。但微信小程序的环境与其他平台(如H5、App)有所不同,可能会有一些适配问题。需要说明uni-ui在微信小程序中的兼容性情况,以及常见的问题原因。 然后,用户可能遇到的问题可能包括:组件未正确引入、样式未生效、特定API不支持、平台差异等。需要逐一分析这些可能性,并提供解决方案。例如,检查是否正确注册组件,样式是否被覆盖,是否使用了微信小程序不支持的功能等。 另外,用户可能对uni-ui的性能有疑虑,需要说明在正确使用的情况下,uni-ui的性能表现,以及如何优化。例如,避免不必要的复杂布局,按需引入组件等。 还要考虑到用户可能没有正确配置项目,比如未安装必要的依赖,或未正确配置easycom自动引入组件。需要指导用户检查这些配置步骤。 最后,可能需要提供一些实际案例或代码示例,帮助用户理解如何正确使用uni-ui组件,并推荐查看官方文档社区资源,以解决更深层次的问题。 总结下来,回答的结构应该是先肯定uni-ui的可用性,然后分析可能的问题原因,再给出具体的排查步骤解决方案,最后提供优化建议资源指引。需要保持回答的条理清晰,逐步引导用户解决问题,并确保信息准确可靠。</think>### 关于 uni-ui 在微信小程序中的兼容性与常见问题解析 uni-ui 是 DCloud 官方推出的 **跨端 UI 组件库**,理论上支持微信小程序,但在实际使用中可能会因 **平台差异、配置错误或版本兼容性** 导致组件失效。以下是具体分析与解决方案: --- #### 一、uni-ui 是否支持微信小程序? - **官方声明**:uni-ui 基于 uni-app 开发,支持 **微信小程序、H5、App** 等多端运行。 - **核心限制**: 微信小程序与其他平台的运行环境存在差异(如 DOM/CSS 支持度、API 实现),可能导致部分组件功能受限或需要额外适配。 --- #### 二、常见 "uni-ui 不好使" 的场景与解决方案 ##### 1️⃣ **组件未正确引入** - **现象**:组件不显示、控制台报错 `Component is not found`。 - **原因**: 未通过 `easycom` 自动引入 或 手动注册组件。 - **解决步骤**: 1. **检查 `pages.json` 配置**: 确保已开启 `easycom` 自动引入(默认开启): ```json // pages.json { "easycom": { "autoscan": true, "custom": { "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } } } ``` 2. **手动引入(可选)**: 在 `.vue` 文件中显式导入组件: ```vue <script> import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' export default { components: { uniBadge } } </script> ``` --- ##### 2️⃣ **样式未生效** - **现象**:组件显示但样式错乱(如位置偏移、颜色异常)。 - **原因**: - 微信小程序对 CSS 的支持有限(如 `::v-deep` 穿透失效)。 - 组件样式被全局样式覆盖。 - **解决方案**: - **避免深度选择器**:改用 `/deep/` 或 `>>>`(部分版本不支持)。 - **隔离组件样式**:在父组件使用 `scoped` 或 `options: { styleIsolation: 'shared' }`。 - **检查全局样式冲突**:排查 `App.vue` 或公共 CSS 文件中的覆盖规则。 --- ##### 3️⃣ **特定功能失效** - **现象**:组件交互无响应(如按钮点击无效、下拉刷新不触发)。 - **常见原因**: 1. **微信小程序 API 限制**: 例如 `uni-popup` 在微信小程序中依赖 `wx.createSelectorQuery`,若页面层级过深可能失效。 2. **事件绑定错误**: 未使用 `@click` 或自定义事件名不匹配。 - **调试方法**: - **查看控制台警告**:微信开发者工具会提示不支持的 API。 - **简化代码测试**:移除其他代码,单独测试组件功能。 - **使用条件编译**:针对微信小程序调整逻辑: ```vue // #ifdef MP-WEIXIN this.handleWechatSpecificLogic(); // #endif ``` --- #### 三、性能优化建议 | 问题类型 | 表现 | 优化方案 | |---------|------|----------| | 渲染卡顿 | 列表滚动卡顿、动画掉帧 | 1. 使用 `uni-list` 替代原生 `view` 循环<br>2. 开启 `virtual-list` 虚拟滚动 | | 包体积过大 | 微信小程序超过 2MB 限制 | 1. 按需引入组件<br>2. 使用分包加载 | | 启动白屏 | 首页加载时间过长 | 1. 启用分包预加载<br>2. 压缩静态资源 | --- #### 四、版本兼容性排查 - **关键版本**: - `uni-ui` 版本需与 `uni-app` 版本匹配(推荐最新稳定版)。 - 微信基础库版本过低可能导致 API 缺失(需 ≥ 2.11.3)。 - **升级命令**: ```bash npm update @dcloudio/uni-ui @dcloudio/uni-app ``` --- #### 五、替代方案 若特定组件问题无法解决,可考虑: 1. **使用微信原生组件**:如 `picker` 替代 `uni-datetime-picker`。 2. **换用其他 UI 库**:如 Vant Weapp(需通过 `uni-app` 插件转换)。 3. **自定义组件**:针对微信小程序特性封装专属逻辑。 --- ### 总结 uni-ui 在微信小程序中 **整体可用性良好**,但需注意 **平台差异与版本适配**。若遇问题,优先通过以下步骤排查: 1. 检查组件引入方式 2. 对比 H5/App 端表现 3. 查看微信开发者工具控制台报错 4. 查阅 [uni-ui 官方 GitHub Issues](https://github.com/dcloudio/uni-ui/issues) 寻找相似案例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值