devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp分类菜单选择或滚动联动_uni-app分类

作者：知新_RL | 2024-03-25 21:03:12

赞

踩

uni-app分类
  1.  
  2. <template>
  3. 	<view class="u-wrap">
  4. 		<view class="u-menu-wrap">
  5. 			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
  6. 				:scroll-into-view="itemId">
  7. 				<view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
  8. 					:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
  9. 					<text class="u-line-1">{{ item.name }}</text>
  10. 				</view>
  11. 			</scroll-view>
  12. 			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
  13. 				@scroll="rightScroll">
  14. 				<view class="page-view">
  15. 					<view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
  16. 						<view class="item-title">
  17. 							<text>{{ item.name }}</text>
  18. 						</view>
  19. 						<view class="item-container">
  20. 							<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1"
  21. 								@click="featureC(item1.cat, item1.name)">
  22. 								<img style="width: 162rpx;
  23. 							height: 162rpx;border-radius: 25rpx;" src="@/static/imgs/mpbg.jpg" alt="">
  24. 								<view class="contBox">
  25. 									<view class="title">{{ item1.name }}</view>
  26. 									<view class="intro">{{ item1.name }}</view>
  27. 									<view class="btnBox">
  28. 										<view class="btn">查看</view>
  29. 									</view>
  30.  
  31. 								</view>
  32. 							</view>
  33. 						</view>
  34. 					</view>
  35. 				</view>
  36. 			</scroll-view>
  37. 		</view>
  38. 	</view>
  39. </template>
  40.  
  41.  
  42. <script>
  43. export default {
  44. 	data() {
  45. 		return {
  46. 			scrollTop: 0, //tab标题的滚动条位置
  47. 			oldScrollTop: 0, // tab标题的滚动条旧位置
  48. 			current: 0, // 预设当前项的值
  49. 			menuHeight: 0, // 左边菜单的高度
  50. 			menuItemHeight: 0, // 左边菜单item的高度
  51. 			itemId: '', // 栏目右边scroll-view用于滚动的id
  52. 			tabbar: [
  53. 				{
  54. 					"name": "案例类型",
  55. 					"foods": [
  56. 						{
  57. 							"cat": 383,
  58. 							"name": "港珠澳大桥",
  59. 							"icon": "http://nq348.com/uploads/category/20220315/1aeed6fa43b54cd68cce0c4883160f91.png",
  60. 							"key": "蔬菜"
  61. 						},
  62. 						{
  63. 							"cat": 384,
  64. 							"name": "港珠澳大桥",
  65. 							"icon": "http://nq348.com/uploads/category/20220418/09839c618b35b510d50151f9a17793ee.png",
  66. 							"key": "食用菌"
  67. 						},
  68. 						{
  69. 							"cat": 385,
  70. 							"name": "港珠澳大桥",
  71. 							"icon": "http://nq348.com/uploads/category/20220418/5294ad2fc7effc9629cbfdb8baf41773.png",
  72. 							"key": "水果"
  73. 						}
  74. 					]
  75. 				},
  76. 				{
  77. 					"name": "畜禽养殖",
  78. 					"foods": [
  79. 						{
  80. 							"cat": 388,
  81. 							"name": "禽类",
  82. 							"icon": "http://nq348.com/uploads/category/20220418/da31895fc5a9aacf93fea6f27f08afd7.png",
  83. 							"key": "禽类"
  84. 						},
  85. 						{
  86. 							"cat": 389,
  87. 							"name": "畜类",
  88. 							"icon": "http://nq348.com/uploads/category/20220418/6352081e3f3b36f9360a933676e9452c.png",
  89. 							"key": "畜类"
  90. 						},
  91. 						{
  92. 							"cat": 391,
  93. 							"name": "蛋类",
  94. 							"icon": "http://nq348.com/uploads/category/20220418/d2e7ab4224679c0c796ba3ddd8a68e2f.png",
  95. 							"key": "蛋类"
  96. 						},
  97. 						{
  98. 							"cat": 390,
  99. 							"name": "水产",
  100. 							"icon": "http://nq348.com/uploads/category/20220418/52a1f1baa7617ef4d4e1a4b344b2fce7.png",
  101. 							"key": "水产"
  102. 						}
  103. 					]
  104. 				},
  105. 				{
  106. 					"name": "粮油副食",
  107. 					"foods": [
  108. 						{
  109. 							"cat": 393,
  110. 							"name": "米面粮油",
  111. 							"icon": "http://nq348.com/uploads/category/20220418/1bb32e319ecf5aa352b7fe26fc265004.png",
  112. 							"key": "米面粮油"
  113. 						},
  114. 						{
  115. 							"cat": 394,
  116. 							"name": "坚果干果",
  117. 							"icon": "http://nq348.com/uploads/category/20220418/6ded13eae4a3b113b5225ca8b99bbfdd.png",
  118. 							"key": "坚果干果"
  119. 						},
  120. 						{
  121. 							"cat": 395,
  122. 							"name": "加工食品",
  123. 							"icon": "http://nq348.com/uploads/category/20220418/1e1c10838799de5834aa77f0f9eb8f40.png",
  124. 							"key": "加工食品"
  125. 						},
  126. 						{
  127. 							"cat": 396,
  128. 							"name": "茶烟酒",
  129. 							"icon": "http://nq348.com/uploads/category/20220418/c43cd994e49023c7efdf2b18b1bca30b.png",
  130. 							"key": "茶烟酒"
  131. 						}
  132. 					]
  133. 				},
  134. 				{
  135. 					"name": "花卉苗木",
  136. 					"foods": [
  137. 						{
  138. 							"cat": 398,
  139. 							"name": "鲜花盆景",
  140. 							"icon": "http://nq348.com/uploads/category/20220418/b21c44045daaa8b8d148981ba9efc2e0.png",
  141. 							"key": "鲜花盆景"
  142. 						},
  143. 						{
  144. 							"cat": 399,
  145. 							"name": "果树苗",
  146. 							"icon": "http://nq348.com/uploads/category/20220418/63ee2b902ff0f4d638d8a5ad770f7641.png",
  147. 							"key": "果树苗"
  148. 						},
  149. 						{
  150. 							"cat": 400,
  151. 							"name": "蔬瓜种子",
  152. 							"icon": "http://nq348.com/uploads/category/20220418/2df521877616ee44fd01aae0434a5815.png",
  153. 							"key": "蔬瓜种子"
  154. 						},
  155. 						{
  156. 							"cat": 401,
  157. 							"name": "经济作物",
  158. 							"icon": "http://nq348.com/uploads/category/20220418/f85be72a98694befd889f30de45a1d64.png",
  159. 							"key": "经济作物"
  160. 						}
  161. 					]
  162. 				},
  163. 				{
  164. 					"name": "中草药材",
  165. 					"foods": [
  166. 						{
  167. 							"cat": 403,
  168. 							"name": "全草类",
  169. 							"icon": "http://nq348.com/uploads/category/20220418/01812c1a83f5db7eafbf3bdae927f134.png",
  170. 							"key": "全草类"
  171. 						},
  172. 						{
  173. 							"cat": 405,
  174. 							"name": "根茎皮叶花",
  175. 							"icon": "http://nq348.com/uploads/category/20220418/dca8dcc814401474d4f19ae7394cc209.png",
  176. 							"key": "根茎皮叶花"
  177. 						},
  178. 						{
  179. 							"cat": 406,
  180. 							"name": "滋补品类",
  181. 							"icon": "http://nq348.com/uploads/category/20220418/33b965295811fdd6f5e672e9a3ce34a2.png",
  182. 							"key": "滋补品类"
  183. 						},
  184. 						{
  185. 							"cat": 404,
  186. 							"name": "果实籽仁类",
  187. 							"icon": "http://nq348.com/uploads/category/20220418/1dc8c46c66b4625d458a7f45787ecef9.png",
  188. 							"key": "果实籽仁类"
  189. 						}
  190. 					]
  191. 				},
  192. 				{
  193. 					"name": "其他",
  194. 					"foods": [
  195. 						{
  196. 							"cat": 434,
  197. 							"name": "包装",
  198. 							"icon": "http://nq348.com/uploads/category/20220418/ebdfd326333344825adbe81dbd89e2c9.png",
  199. 							"key": "包装"
  200. 						},
  201. 						{
  202. 							"cat": 435,
  203. 							"name": "安全溯源",
  204. 							"icon": "http://nq348.com/uploads/category/20220418/03230c63f066f46005abf5f576df0ed1.png",
  205. 							"key": "安全溯源"
  206. 						},
  207. 						{
  208. 							"cat": 436,
  209. 							"name": "农用百货",
  210. 							"icon": "http://nq348.com/uploads/category/20220418/93393f2df3264faba86bb449a0c10a79.png",
  211. 							"key": "农用百货"
  212. 						},
  213. 						{
  214. 							"cat": 437,
  215. 							"name": "仓储物流",
  216. 							"icon": "http://nq348.com/uploads/category/20220418/f553505ebabbcb1bf762b288716cf1e7.png",
  217. 							"key": "仓储物流"
  218. 						}
  219. 					]
  220. 				}
  221. 			], // 渲染的数据，放在最后供你们测试
  222. 			arr: [], // 储存距离顶部高度的数组
  223. 			scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
  224. 			timer: null // 定时器
  225. 		}
  226. 	},
  227. 	onReady() {
  228. 		this.getMenuItemTop()
  229. 	},
  230. 	methods: {
  231. 		getElRect(elClass, dataVal) {
  232. 			new Promise((resolve, reject) => {
  233. 				const query = uni.createSelectorQuery().in(this);
  234. 				query.select('.' + elClass).fields({
  235. 					size: true
  236. 				}, res => {
  237. 					// 如果节点尚未生成，res值为null，循环调用执行
  238. 					if (!res) {
  239. 						setTimeout(() => {
  240. 							this.getElRect(elClass);
  241. 						}, 10);
  242. 						return;
  243. 					}
  244. 					this[dataVal] = res.height;
  245. 					resolve();
  246. 				}).exec();
  247. 			})
  248. 		},
  249. 		getMenuItemTop() {
  250. 			new Promise(resolve => {
  251. 				let selectorQuery = uni.createSelectorQuery();
  252. 				selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
  253. 					// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
  254. 					if (!rects.length) {
  255. 						setTimeout(() => {
  256. 							this.getMenuItemTop();
  257. 						}, 10);
  258. 						return;
  259. 					}
  260. 					rects.forEach((rect) => {
  261. 						// 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
  262. 						// this.arr.push(rect.top - rects[0].top);
  263. 						this.arr.push(rect.top)
  264. 						resolve();
  265. 					})
  266. 				}).exec()
  267. 			})
  268. 		},
  269. 		/**
  270. 		* 观测元素相交状态
  271. 		* 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
  272. 		* 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
  273. 		*/
  274. 		async observer() {
  275. 			this.tabbar.map((val, index) => {
  276. 				let observer = uni.createIntersectionObserver(this);
  277. 				observer.relativeTo('.right-box', {
  278. 					top: 0
  279. 				}).observe('#item' + index, res => {
  280. 					if (res.intersectionRatio > 0) {
  281. 						let id = res.id.substring(4);
  282. 						this.leftMenuStatus(id);
  283. 					}
  284. 				})
  285. 			})
  286. 		},
  287. 		/**
  288. 		* 设置左边菜单的滚动状态
  289. 		* @index 传入的 ID
  290. 		*/
  291. 		async leftMenuStatus(index) {
  292. 			this.current = index;
  293. 			// 如果为0，意味着尚未初始化
  294. 			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
  295. 				await this.getElRect('menu-scroll-view', 'menuHeight');
  296. 				await this.getElRect('u-tab-item', 'menuItemHeight');
  297. 			}
  298. 			// 将菜单活动item垂直居中
  299. 			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
  300. 		},
  301. 		/**
  302. 		* 点击左边的栏目切换
  303. 		* @index 传入的 ID
  304. 		*/
  305. 		async swichMenu(index) {
  306. 			if (this.arr.length == 0) {
  307. 				await this.getMenuItemTop();
  308. 			}
  309. 			if (index == this.current) return;
  310. 			this.scrollRightTop = this.oldScrollTop;
  311. 			this.$nextTick(function () {
  312. 				this.scrollRightTop = this.arr[index];
  313. 				this.current = index;
  314. 				this.leftMenuStatus(index);
  315. 			})
  316. 		},
  317. 		/**
  318. 		* 右边菜单滚动
  319. 		* 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
  320. 		*/
  321. 		async rightScroll(e) {
  322. 			this.oldScrollTop = e.detail.scrollTop;
  323. 			if (this.arr.length == 0) {
  324. 				await this.getMenuItemTop();
  325. 			}
  326. 			if (this.timer) return;
  327. 			if (!this.menuHeight) {
  328. 				await this.getElRect('menu-scroll-view', 'menuHeight');
  329. 			}
  330. 			setTimeout(() => { // 节流
  331. 				this.timer = null;
  332. 				// scrollHeight为右边菜单垂直中点位置
  333. 				// let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
  334. 				// scrollHeight为右边菜单头部位置
  335. 				let scrollHeight = e.detail.scrollTop + 20;
  336. 				for (let i = 0; i < this.arr.length; i++) {
  337. 					let height1 = this.arr[i];
  338. 					let height2 = this.arr[i + 1];
  339. 					if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
  340. 						this.leftMenuStatus(i);
  341. 						return;
  342. 					}
  343. 				}
  344. 			}, 10)
  345. 		}
  346. 	}
  347. }
  348. </script>
  349.  
  350. <style  scoped>
  351. page {
  352. 	background: #fff !important;
  353. }
  354.  
  355. .u-wrap {
  356. 	/* #ifdef H5 */
  357. 	height: calc(100vh - var(--window-top));
  358. 	/* #endif */
  359. 	display: flex;
  360. 	flex-direction: column;
  361. 	height: 100vh;
  362. 	background: #fff;
  363. }
  364.  
  365. .u-search-box {
  366. 	padding: 18rpx 30rpx;
  367. }
  368.  
  369. .u-menu-wrap {
  370. 	flex: 1;
  371. 	display: flex;
  372. 	overflow: hidden;
  373. }
  374.  
  375. .u-tab-view {
  376. 	width: 158rpx;
  377. 	height: 100%;
  378. }
  379.  
  380. .u-tab-item {
  381. 	width: 158rpx;
  382. 	height: 152rpx;
  383. 	background: #f8f8f8;
  384. 	box-sizing: border-box;
  385. 	display: flex;
  386. 	align-items: center;
  387. 	justify-content: center;
  388. 	font-size: 24rpx;
  389. 	color: #9a9a9a;
  390. 	font-weight: 400;
  391. 	line-height: 1;
  392. }
  393.  
  394. .u-tab-item-active {
  395. 	position: relative;
  396. 	color: #302e27;
  397. 	font-size: 24rpx;
  398. 	font-weight: 500;
  399. 	background: #ffffff;
  400. }
  401.  
  402. .u-tab-item-active::before {
  403. 	content: "";
  404. 	position: absolute;
  405. 	border-left: 4px solid #294994;
  406. 	height: 52rpx;
  407. 	left: 0;
  408. 	top: 50rpx;
  409. }
  410.  
  411. .u-tab-view {
  412. 	height: 100%;
  413. }
  414.  
  415. .right-box {
  416. 	background-color: rgb(250, 250, 250);
  417. }
  418.  
  419. .page-view {
  420. 	width: 592rpx;
  421.  
  422. }
  423.  
  424. .class-item {
  425.  
  426. 	background-color: #fff;
  427. 	padding: 0 24rpx;
  428. 	padding-bottom: 10rpx;
  429. 	margin-bottom: 20rpx;
  430. 	border-radius: 8rpx;
  431. }
  432.  
  433. .class-item:last-child {
  434. 	min-height: 100vh;
  435. }
  436.  
  437. .item-title {
  438. 	padding: 18rpx 0;
  439. 	color: #2d2e2e;
  440. 	font-size: 24rpx;
  441. 	position: sticky;
  442. 	top: 0;
  443. 	background: #ffffff;
  444. 	font-weight: 700;
  445. }
  446.  
  447.  
  448. .item-container {
  449. 	/* display: flex; */
  450. 	/* flex-wrap: wrap; */
  451. }
  452.  
  453. .thumb-box {
  454. 	/* width: 33.333333%; */
  455. 	display: flex;
  456. 	/* align-items: center; */
  457. 	justify-content: start;
  458. 	/* flex-direction: column; */
  459. 	margin-top: 20rpx;
  460. }
  461.  
  462. .item-menu-image {
  463. 	width: 120rpx;
  464. 	height: 120rpx;
  465. }
  466.  
  467. .contBox {
  468. 	width: 406rpx;
  469.  
  470. 	padding-left: 22rpx;
  471.  
  472.  
  473. }
  474.  
  475. .title {
  476. 	width: 100%;
  477. 	overflow: hidden;
  478. 	font-weight: 700;
  479. 	font-size: 24rpx;
  480. 	margin-bottom: 8rpx;
  481. }
  482.  
  483. .intro {
  484. 	color: #a9b7c8;
  485. 	font-size: 22rpx;
  486. 	height: 80rpx;
  487. 	overflow: hidden;
  488. }
  489.  
  490. .btnBox {
  491.  
  492. 	display: flex;
  493. 	justify-content: flex-end;
  494.  
  495.  
  496. }
  497.  
  498. .btn {
  499. 	height: 36rpx;
  500. 	padding: 0 10rpx;
  501. 	text-align: center;
  502. 	line-height: 36rpx;
  503. 	font-size: 24rpx;
  504. 	border-radius: 25rpx;
  505. 	background: #294994;
  506. 	color: #fff;
  507. }
  508. </style>
  509.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/312464
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号