UNIAPP#UVIEW-UI#支付宝(ALIPAY)小程序端优化

UNIAPP#UVIEW-UI#支付宝(ALIPAY)小程序端优化

UNIAPP#UVIEW-UI#支付宝(ALIPAY)小程序端优化 垂直分类

---

业务魔改版本

1.8.3

垂直分类模板

---

前言

微信小程序转义支付宝小程序的优化体验

---

一、垂直分类

此次魔改方案为左右联动垂直分类，左右监听ScrollView滚动状态，联动切换至业务所需位置，不过由于监听条件规则的影响，导致支付宝小程序在做滚动监听的时候会触发原有的时间函数处理，导致页面卡顿且动画延迟。
——页面完成加载计算业务所需数据高度

this.$nextTick(async ()=>{
	await this.GetMenuItemTop()
})

UVIEWUI 模板地址

https://www.uviewui.com/layout/menu.html

以“TN”小程序点餐页为例展现相关业务处理

二、魔改步骤

1.功能理解

业务步骤

获取右侧模块数据高度

1.点击左侧，右侧滚动到指定模块位置

2.滑动右侧，左侧滚动到所属模块的菜单目录头的位置且下标显示为当前所属

2.方法功能分析及优化建议(ALIPAY)

主要事件
arr：右侧所有的区域高度(h1,h2…)
current:左侧菜单导航下标
scrollRightTop：右侧菜单的置顶高度
scrollTop：左侧菜单导航的置顶高度
menuHeight：左边菜单的高度

//触发事件
index业务下标
@tap.stop="SwichMenu(index)"
// 点击左边的栏目切换
async SwichMenu(index) {
	// if (index == this.current) return;
	//console.log(index);
	this.current = index;//赋值左侧点击下标的位置，给予视口相应的视觉展示
	this.$nextTick(async ()=>{
		this.scrollRightTop = this.arr[index];
		this.scrollTop = 80 * index;
		this.current = index;
		// #ifdef MP-ALIPAY
		await this.leftMenuStatus_ALI(index);
		// #endif
	})
}
//触发事件
@scroll="RightScroll"
// #ifdef MP-ALIPAY
// 右边菜单滚动
async RightScroll(e) {
	let scrollHeight = e.detail.scrollTop;
	if(e.detail.scrollTop<0) return ;
	for (let i = 0; i < this.arr.length; i++) {
		let height1 = this.arr[i];
		let height2 = this.arr[i + 1];
		// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
		if(!height2 || scrollHeight >= height1 && scrollHeight < height2){
			return this.leftMenuStatus_ALI(i);
		}
	}
}
// #endif

// #ifdef MP-ALIPAY
// 设置左边菜单的滚动状态
async leftMenuStatus_ALI(index) {
	//此处高度可用文档提供的示例处理-使用js方法获取高度-GetElRect(**,**)
	let heifht = 80;//px
	this.scrollTop = index * heifht + heifht / 2 - heifht*this.ShopMenu.length / 2;
	//计算左侧菜单置顶高度
}
// #endif

// 获取一个目标元素的高度
GetElRect(elClass, dataVal) {
	new Promise((resolve, reject) => {
		const query = uni.createSelectorQuery().in(this);
		query.select('.' + elClass).fields({
			size: true
		}, res => {
			// 如果节点尚未生成，res值为null，循环调用执行
			if (!res) {
				setTimeout(() => {
					this.GetElRect(elClass);
				}, 10);
				return;
			}
			this[dataVal] = res.height;
			resolve();
		}).exec();
	})
}

// 获取右边菜单每个item到顶部的距离
GetMenuItemTop() {
	new Promise(resolve => {
		let selectorQuery = uni.createSelectorQuery();
		selectorQuery.selectAll('.class属性').boundingClientRect((rects) => {
			// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
			if(!rects.length) {
				setTimeout(() => {
					this.GetMenuItemTop();
				},10);
				return ;
			}
			rects.forEach((rect) => {
				// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
				this.arr.push(rect.top - rects[0].top);
				resolve();
			})
		}).exec()
	})
}

---

总结

关于优化方法为个人理解，如有疑问可以私信或文章留言。