uniapp分类菜单选择或滚动联动

已于 2024-02-26 18:00:20 修改
阅读量694 收藏 1
点赞数 2
分类专栏： uniapp 文章标签： uni-app 前端 javascript
于 2024-02-26 16:17:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wendy_qx/article/details/136302332
版权 

<template>
	<view class="u-wrap">
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
				:scroll-into-view="itemId">
				<view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
					:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{ item.name }}</text>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
				@scroll="rightScroll">
				<view class="page-view">
					<view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
						<view class="item-title">
							<text>{{ item.name }}</text>
						</view>
						<view class="item-container">
							<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1"
								@click="featureC(item1.cat, item1.name)">
								<img style="width: 162rpx;
							height: 162rpx;border-radius: 25rpx;" src="@/static/imgs/mpbg.jpg" alt="">
								<view class="contBox">
									<view class="title">{{ item1.name }}</view>
									<view class="intro">{{ item1.name }}</view>
									<view class="btnBox">
										<view class="btn">查看</view>
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>


<script>
export default {
	data() {
		return {
			scrollTop: 0, //tab标题的滚动条位置
			oldScrollTop: 0, // tab标题的滚动条旧位置
			current: 0, // 预设当前项的值
			menuHeight: 0, // 左边菜单的高度
			menuItemHeight: 0, // 左边菜单item的高度
			itemId: '', // 栏目右边scroll-view用于滚动的id
			tabbar: [
				{
					"name": "案例类型",
					"foods": [
						{
							"cat": 383,
							"name": "港珠澳大桥",
							"icon": "http://nq348.com/uploads/category/20220315/1aeed6fa43b54cd68cce0c4883160f91.png",
							"key": "蔬菜"
						},
						{
							"cat": 384,
							"name": "港珠澳大桥",
							"icon": "http://nq348.com/uploads/category/20220418/09839c618b35b510d50151f9a17793ee.png",
							"key": "食用菌"
						},
						{
							"cat": 385,
							"name": "港珠澳大桥",
							"icon": "http://nq348.com/uploads/category/20220418/5294ad2fc7effc9629cbfdb8baf41773.png",
							"key": "水果"
						}
					]
				},
				{
					"name": "畜禽养殖",
					"foods": [
						{
							"cat": 388,
							"name": "禽类",
							"icon": "http://nq348.com/uploads/category/20220418/da31895fc5a9aacf93fea6f27f08afd7.png",
							"key": "禽类"
						},
						{
							"cat": 389,
							"name": "畜类",
							"icon": "http://nq348.com/uploads/category/20220418/6352081e3f3b36f9360a933676e9452c.png",
							"key": "畜类"
						},
						{
							"cat": 391,
							"name": "蛋类",
							"icon": "http://nq348.com/uploads/category/20220418/d2e7ab4224679c0c796ba3ddd8a68e2f.png",
							"key": "蛋类"
						},
						{
							"cat": 390,
							"name": "水产",
							"icon": "http://nq348.com/uploads/category/20220418/52a1f1baa7617ef4d4e1a4b344b2fce7.png",
							"key": "水产"
						}
					]
				},
				{
					"name": "粮油副食",
					"foods": [
						{
							"cat": 393,
							"name": "米面粮油",
							"icon": "http://nq348.com/uploads/category/20220418/1bb32e319ecf5aa352b7fe26fc265004.png",
							"key": "米面粮油"
						},
						{
							"cat": 394,
							"name": "坚果干果",
							"icon": "http://nq348.com/uploads/category/20220418/6ded13eae4a3b113b5225ca8b99bbfdd.png",
							"key": "坚果干果"
						},
						{
							"cat": 395,
							"name": "加工食品",
							"icon": "http://nq348.com/uploads/category/20220418/1e1c10838799de5834aa77f0f9eb8f40.png",
							"key": "加工食品"
						},
						{
							"cat": 396,
							"name": "茶烟酒",
							"icon": "http://nq348.com/uploads/category/20220418/c43cd994e49023c7efdf2b18b1bca30b.png",
							"key": "茶烟酒"
						}
					]
				},
				{
					"name": "花卉苗木",
					"foods": [
						{
							"cat": 398,
							"name": "鲜花盆景",
							"icon": "http://nq348.com/uploads/category/20220418/b21c44045daaa8b8d148981ba9efc2e0.png",
							"key": "鲜花盆景"
						},
						{
							"cat": 399,
							"name": "果树苗",
							"icon": "http://nq348.com/uploads/category/20220418/63ee2b902ff0f4d638d8a5ad770f7641.png",
							"key": "果树苗"
						},
						{
							"cat": 400,
							"name": "蔬瓜种子",
							"icon": "http://nq348.com/uploads/category/20220418/2df521877616ee44fd01aae0434a5815.png",
							"key": "蔬瓜种子"
						},
						{
							"cat": 401,
							"name": "经济作物",
							"icon": "http://nq348.com/uploads/category/20220418/f85be72a98694befd889f30de45a1d64.png",
							"key": "经济作物"
						}
					]
				},
				{
					"name": "中草药材",
					"foods": [
						{
							"cat": 403,
							"name": "全草类",
							"icon": "http://nq348.com/uploads/category/20220418/01812c1a83f5db7eafbf3bdae927f134.png",
							"key": "全草类"
						},
						{
							"cat": 405,
							"name": "根茎皮叶花",
							"icon": "http://nq348.com/uploads/category/20220418/dca8dcc814401474d4f19ae7394cc209.png",
							"key": "根茎皮叶花"
						},
						{
							"cat": 406,
							"name": "滋补品类",
							"icon": "http://nq348.com/uploads/category/20220418/33b965295811fdd6f5e672e9a3ce34a2.png",
							"key": "滋补品类"
						},
						{
							"cat": 404,
							"name": "果实籽仁类",
							"icon": "http://nq348.com/uploads/category/20220418/1dc8c46c66b4625d458a7f45787ecef9.png",
							"key": "果实籽仁类"
						}
					]
				},
				{
					"name": "其他",
					"foods": [
						{
							"cat": 434,
							"name": "包装",
							"icon": "http://nq348.com/uploads/category/20220418/ebdfd326333344825adbe81dbd89e2c9.png",
							"key": "包装"
						},
						{
							"cat": 435,
							"name": "安全溯源",
							"icon": "http://nq348.com/uploads/category/20220418/03230c63f066f46005abf5f576df0ed1.png",
							"key": "安全溯源"
						},
						{
							"cat": 436,
							"name": "农用百货",
							"icon": "http://nq348.com/uploads/category/20220418/93393f2df3264faba86bb449a0c10a79.png",
							"key": "农用百货"
						},
						{
							"cat": 437,
							"name": "仓储物流",
							"icon": "http://nq348.com/uploads/category/20220418/f553505ebabbcb1bf762b288716cf1e7.png",
							"key": "仓储物流"
						}
					]
				}
			], // 渲染的数据，放在最后供你们测试
			arr: [], // 储存距离顶部高度的数组
			scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
			timer: null // 定时器
		}
	},
	onReady() {
		this.getMenuItemTop()
	},
	methods: {
		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();
			})
		},
		getMenuItemTop() {
			new Promise(resolve => {
				let selectorQuery = uni.createSelectorQuery();
				selectorQuery.selectAll('.class-item').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);
						this.arr.push(rect.top)
						resolve();
					})
				}).exec()
			})
		},
		/**
		* 观测元素相交状态
		* 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
		* 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
		*/
		async observer() {
			this.tabbar.map((val, index) => {
				let observer = uni.createIntersectionObserver(this);
				observer.relativeTo('.right-box', {
					top: 0
				}).observe('#item' + index, res => {
					if (res.intersectionRatio > 0) {
						let id = res.id.substring(4);
						this.leftMenuStatus(id);
					}
				})
			})
		},
		/**
		* 设置左边菜单的滚动状态
		* @index 传入的 ID
		*/
		async leftMenuStatus(index) {
			this.current = index;
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
				await this.getElRect('u-tab-item', 'menuItemHeight');
			}
			// 将菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		/**
		* 点击左边的栏目切换
		* @index 传入的 ID
		*/
		async swichMenu(index) {
			if (this.arr.length == 0) {
				await this.getMenuItemTop();
			}
			if (index == this.current) return;
			this.scrollRightTop = this.oldScrollTop;
			this.$nextTick(function () {
				this.scrollRightTop = this.arr[index];
				this.current = index;
				this.leftMenuStatus(index);
			})
		},
		/**
		* 右边菜单滚动
		* 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
		*/
		async rightScroll(e) {
			this.oldScrollTop = e.detail.scrollTop;
			if (this.arr.length == 0) {
				await this.getMenuItemTop();
			}
			if (this.timer) return;
			if (!this.menuHeight) {
				await this.getElRect('menu-scroll-view', 'menuHeight');
			}
			setTimeout(() => { // 节流
				this.timer = null;
				// scrollHeight为右边菜单垂直中点位置
				// let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
				// scrollHeight为右边菜单头部位置
				let scrollHeight = e.detail.scrollTop + 20;
				for (let i = 0; i < this.arr.length; i++) {
					let height1 = this.arr[i];
					let height2 = this.arr[i + 1];
					if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
						this.leftMenuStatus(i);
						return;
					}
				}
			}, 10)
		}
	}
}
</script>

<style  scoped>
page {
	background: #fff !important;
}

.u-wrap {
	/* #ifdef H5 */
	height: calc(100vh - var(--window-top));
	/* #endif */
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #fff;
}

.u-search-box {
	padding: 18rpx 30rpx;
}

.u-menu-wrap {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.u-tab-view {
	width: 158rpx;
	height: 100%;
}

.u-tab-item {
	width: 158rpx;
	height: 152rpx;
	background: #f8f8f8;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #9a9a9a;
	font-weight: 400;
	line-height: 1;
}

.u-tab-item-active {
	position: relative;
	color: #302e27;
	font-size: 24rpx;
	font-weight: 500;
	background: #ffffff;
}

.u-tab-item-active::before {
	content: "";
	position: absolute;
	border-left: 4px solid #294994;
	height: 52rpx;
	left: 0;
	top: 50rpx;
}

.u-tab-view {
	height: 100%;
}

.right-box {
	background-color: rgb(250, 250, 250);
}

.page-view {
	width: 592rpx;

}

.class-item {

	background-color: #fff;
	padding: 0 24rpx;
	padding-bottom: 10rpx;
	margin-bottom: 20rpx;
	border-radius: 8rpx;
}

.class-item:last-child {
	min-height: 100vh;
}

.item-title {
	padding: 18rpx 0;
	color: #2d2e2e;
	font-size: 24rpx;
	position: sticky;
	top: 0;
	background: #ffffff;
	font-weight: 700;
}


.item-container {
	/* display: flex; */
	/* flex-wrap: wrap; */
}

.thumb-box {
	/* width: 33.333333%; */
	display: flex;
	/* align-items: center; */
	justify-content: start;
	/* flex-direction: column; */
	margin-top: 20rpx;
}

.item-menu-image {
	width: 120rpx;
	height: 120rpx;
}

.contBox {
	width: 406rpx;

	padding-left: 22rpx;


}

.title {
	width: 100%;
	overflow: hidden;
	font-weight: 700;
	font-size: 24rpx;
	margin-bottom: 8rpx;
}

.intro {
	color: #a9b7c8;
	font-size: 22rpx;
	height: 80rpx;
	overflow: hidden;
}

.btnBox {

	display: flex;
	justify-content: flex-end;


}

.btn {
	height: 36rpx;
	padding: 0 10rpx;
	text-align: center;
	line-height: 36rpx;
	font-size: 24rpx;
	border-radius: 25rpx;
	background: #294994;
	color: #fff;
}
</style>

wendy_qx
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp(全端兼容) - 最新详细实现商品左右联动列表效果，uniapp全平台支持的“左侧分类菜单，右侧商品卡片“的定位联动，滑动商品列表时锚点自动高亮菜单，类似外卖美团京东商城列表（详细代码）
高级前端工程师
06-18 1734
uni-app，商城分类列表，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，商品分类页面，左分类，右商品，左侧菜单导航+右侧列表内容，分类菜单选择或滚动联动，uniApp实现仿京东左右联动活动，uniapp左边滚动右边固定效果，实现商品分类页面的 左边滚动右边固定效果，商品左右联动商品分类页面，联动侧边栏导航分类，分类列表左右联动，左侧菜单右侧列表双向联动的效果，仿美团左侧菜单栏，左侧菜单右侧商品锚点组件，好用的插件组件，微信小程序 uni
uni-app实现上下菜单联动
qq_43505775的博客
09-17 846
正在编辑中。。。。。。
uniapp实现tab分类导航以及滚动联动效果
yangxun9264986的博客
05-07 1495
uniapp+vue3实现tab菜单左右滚动以及内容滚动切换tab的效果
uniapp微信小程序实现菜单左右联动效果
qq_35410565的博客
05-09 1190
仿点餐小程序，点餐页面实现左右菜单互联效果
uniapp手写滚动选择器
最新发布
肥晨开发的学习之路
07-25 1001
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。没有符合项目要求的选择器 就手写了一个。
uniapp-菜单组件
04-11
uni-app 菜单组件，flex布局 <!-- author hzj email hzj_51it@aliyun.com wechat XHKJ_IT 菜单组件 v0.01 参数： 属性 类型 说明 top Number 菜单项距离顶部的位置 menuList Array 菜单具体项：url 需要跳转的地址，icon：图标，txt：文字内容，type ：跳转方式==navigate，redirect，reLaunch，switchTab，navigateBack
uniapp-实现左侧菜单栏与右侧功能区联动~（保姆级）个人思路，需求实测实现啦~
m0_62626838的博客
07-19 478
1、需求1：实现左侧菜单栏与右侧功能区联动~。当点击切换左侧菜单栏时需变色同时需将其对应右侧功能区节点滑动至顶部。2、需求2：实现滑动右侧功能区，当其所处的功能区节点刚刚触顶时，需切换左侧菜单栏与之对应。炒毛豆也是刚刚接触小程序。后续会将学习心得不定时记录~（仅做个人笔记使用）5、需求实测实现啦~
uniapp实现菜单左右二级联动
m0_52559388的博客
03-10 1284
uniapp实现菜单左右二级联动
uni-app —— 小程序实现左右菜单联动
Bonsoir777的博客
11-11 5214
本文主要介绍小程序菜单的左右了联动实现过程
uniapp-scrollview实现双联动.zip
07-27
在本文中，我们将深入探讨如何使用uni-app的ScrollView组件实现双联动效果，这是一种常见的前端交互设计，常见于导航菜单与内容区域的同步滚动。在微信小程序等移动应用开发中，这种功能可以提供良好的用户体验，使...
uniapp picker-view嵌入页面的滚动选择器(地区版 省市区三级联动）
weixin_51867622的博客
02-05 3421
//这里使用了插件市场的组件pcaPicker （组件的代码放在最后了） 连接：pcaPicker - DCloud 插件市场 1.引入组件 注册组件 使用组件 import pcaPicker from '@/components/pcaPicker/pcaPicker.vue' components: { pcaPicker }, <pcaPicker ref="pcaPicker" @confirm="getPCA01">&lt...
uniapp 顶部tab切换菜单
03-16
最近在使用uniAPP做项目，页面中要使用到顶部tab菜单，但又不想使用别人的插件，于是自己用代码实现了一下
Uniapp实现左侧导航和右侧scroll-view联动
weixin_47249500的博客
06-04 2270
1、点击左侧分类列表，高亮显示当前分类项，右侧scroll-view滑动到分类对应的位置。2、滑动右侧的scroll-view，左侧的分类列表高亮显示当前商品所属的分类。
uniapp类似京东和淘宝的菜单分类
weixin_45167444的博客
03-28 720
uniapp类似京东和淘宝的菜单分类
uniapp左右联动菜单
wilL-my的博客
11-24 9396
来自uView提供的模版https://uviewui.com <template> <view class="u-wrap"> <view class="u-search-box"> <view class="u-search-inner"> <u-icon name="search" color="#909399" :size="28"></u-icon> <text class="...
uniapp微信小程序 --下拉菜单
apple_70049717的博客
01-21 4050
uniapp微信小程序下拉菜单
uniapp 菜单栏
从盲流子到程序员
04-06 1562
uniapp滚动菜单
uniapp 模仿 Android的Menu菜单栏
tengyuxin的博客
10-29 1022
下面这张图就是我们要模拟的菜单功能。
微信小程序--优购商城项目（3）
ljn1046016768的博客
04-10 712
分类页面功能
uniapp分类左右联动
05-15
要实现 uniapp 分类左右联动，可以考虑以下步骤： 1. 定义分类数据结构。可以使用对象或数组来表示分类数据，包括分类名称和分类对应的数据。 2. 在页面中创建两个组件，一个用来展示分类列表，一个用来展示分类对应的数据。 3. 在分类列表组件中，绑定分类数据，并根据用户点击的分类名称，更新数据组件中展示的数据。 4. 在数据组件中，根据分类列表组件传递过来的分类名称，筛选出对应的数据进行展示。 5. （可选）为分类列表添加滚动事件，实现滚动到相应位置时高亮对应的分类。 以上是一种基本的实现方式，具体实现还需要根据具体需求来调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值