uni-app-商品分类导航、 双向绑定_uniapp 分类

uni-app商品分类导航 、双向绑定

第一种方法

<template>
	<view class="row navBox" :style="scrollHeiht">
		<!-- 左侧一级分类列表 -->
		<scroll-view :scroll-top="scrollTopLeft" scroll-y class="leftNavBox col20-5 height-100">
			<view class="leftNavItem py-20 text-center" v-for="(item,index) in leftNavData" :key="index">
				<view @tap="leftTap(index)" :class="leftActiveIndex===index?'leftActive':''" class="leftNavContent py-10">
					{
   {
   item.title}}
				</view>
			</view>
		</scroll-view>

			<!-- 右侧二级分类列表 -->
		<scroll-view @scroll="rightScroll" :scroll-top="scrollTop" scroll-y class="rightNavBox col20-15 height-100" scroll-with-animation>
			<view class="rightNavItem row justify-content-space-around align-items-center" v-for="(item,index) in rightNavData" :key="index">
					<view class="font-bold text-center col-10">
						商品分类{
   {
   index+1}}
					</view>
					<view class="rightNavContent display-flex align-items-center justify-content-center flex-direction-column" v-for="(item1,index1) in item" :key="index1">
						<image :src="item1.url"></image>
						{
   {
   item1.title}}
					</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
   
		data() {
   
			return {
   
				leftActiveIndex: 0,
				leftNavData: [], /* 一级导航栏的所有数据 */
				rightNavData: [], /* 二级导航栏的所有数据 */
				scrollTop:0, 
				scrollHeiht:"",  /* 可视区域的高度 */
				leftScrollTop:[],    /*左侧每一个分类项距离顶部的高度*/
				rightScrollTop:[],   /*右侧每一个分类项距离顶部的高度*/
				leftNavItemHeight:0, /*左侧一个分类项的高度*/
				scrollTopLeft:0
			}
		},
		onLoad() {
   
			/* 获取屏幕可视区域的高度 */
			let height=uni.getSystemInfoSync().windowHeight
			this.scrollHeiht=`height:${
   height}px`
			
			/* 获取模拟数据 */
			for (var i = 0; i < 20; i++) {
   
				/* 左边数据 */
				let data = {
   
					title: `分类${
   i+1}`
				};
				this.leftNavData.push(data);
			
				/* 右边数据 | 二位数组 */
				this.rightNavData.push ([
					{
   
						url: "../../static/images/cate/cate_01.png",
						title: `分类${
   i+1}:商品`
					},
					{
   
						url: "../../static/images/cate/cate_02.png",
						title: `分类${
   i+1}:商品`
					},
					{
   
						url: "../../static/images/cate/cate_03.png",
						title: `分类${
   i+1}:商品`
					},
					{
   
						url: "../../static/images/cate/cate_04.png",
						title: `分类${
   i+1}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92