Uniapp+vue3+scroll-view编写奶茶菜单展示组件

效果视频

Uniapp + vue3 + scroll-view制作奶茶店铺菜单组件

实现原理：

使用scroll-view组件，通过计算各元素的高度，每个元素块设置一个top属性，用来表示需要滚动的高度。在滚动时，根据滚动的高度和元素的top值比较，可以定位到当前的元素，然后关联到做左边的滚动位置。

setGoodsTop() {
				let h = 0;
				let typeHight = 0;
				this.typeList.forEach(item => {
					let view = uni.createSelectorQuery().select(`#type-right-${item.name}`)
					view.fields({
						size: true
					}, data => {
						item.top = h
						h += data.height
						item.bottom = h
					}).exec();
					
					let typeView =  uni.createSelectorQuery().select(`#type-${item.name}`)
					typeView.fields({
						size: true
					}, data => {
						item.typeTop = typeHight
						typeHight += data.height
						item.typeBottom = typeHight
					}).exec();
				})
				this.isSeted = true;
			}

源码及素材

如需源码和素材，可关注微信工作号年轻有为编码日记回复“代码仓”获取。