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

问题复现

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

排查思路

样式问题还是逻辑问题

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

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

效果展示