商品分类显示scroll-view布局实现

快捷键 view{菜单数据$}*40 回车后即可快速生成

<view class="cates">
<!-- 搜索开始 -->
    <SearchBar></SearchBar>
<!-- 搜索结束 -->
<view class="cates_container">
<!-- 左侧菜单 开始 -->
<scroll-view scroll-y class="left_menu">
    <view>菜单数据1</view>
    <view>菜单数据2</view>
    <view>菜单数据3</view>
    <view>菜单数据4</view>
    <view>菜单数据5</view>
    <view>菜单数据6</view>
    <view>菜单数据7</view>
    <view>菜单数据8</view>
    <view>菜单数据9</view>
    <view>菜单数据10</view>
    <view>菜单数据11</view>
    <view>菜单数据12</view>
    <view>菜单数据13</view>
    <view>菜单数据14</view>
    <view>菜单数据15</view>
    <view>菜单数据16</view>
    <view>菜单数据17</view>
    <view>菜单数据18</view>
    <view>菜单数据19</view>
    <view>菜单数据20</view>
    <view>菜单数据21</view>
    <view>菜单数据22</view>
    <view>菜单数据23</view>
    <view>菜单数据24</view>
    <view>菜单数据25</view>
    <view>菜单数据26</view>
    <view>菜单数据27</view>
    <view>菜单数据28</view>
    <view>菜单数据29</view>
    <view>菜单数据30</view>
    <view>菜单数据1</view>
    <view>菜单数据2</view>
    <view>菜单数据3</view>
    <view>菜单数据4</view>
    <view>菜单数据5</view>
    <view>菜单数据6</view>
    <view>菜单数据7</view>
    <view>菜单数据8</view>
    <view>菜单数据9</view>
    <view>菜单数据10</view>
    <view>菜单数据11</view>
    <view>菜单数据12</view>
    <view>菜单数据13</view>
    <view>菜单数据14</view>
    <view>菜单数据15</view>
    <view>菜单数据16</view>
    <view>菜单数据17</view>
    <view>菜单数据18</view>
    <view>菜单数据19</view>
    <view>菜单数据20</view>
    <view>菜单数据21</view>
    <view>菜单数据22</view>
    <view>菜单数据23</view>
    <view>菜单数据24</view>
    <view>菜单数据25</view>
    <view>菜单数据26</view>
    <view>菜单数据27</view>
    <view>菜单数据28</view>
    <view>菜单数据29</view>
    <view>菜单数据30</view>
    <view>菜单数据31</view>
    <view>菜单数据32</view>
    <view>菜单数据33</view>
    <view>菜单数据34</view>
    <view>菜单数据35</view>
    <view>菜单数据36</view>
    <view>菜单数据37</view>
    <view>菜单数据38</view>
    <view>菜单数据39</view>
    <view>菜单数据40</view>
</scroll-view>
<!-- 左侧菜单 结束 -->
<!-- 右侧商品数据开始 -->
<scroll-view scroll-y class="right_content">
    <view>商品数据1</view>
    <view>商品数据2</view>
    <view>商品数据3</view>
    <view>商品数据4</view>
    <view>商品数据5</view>
    <view>商品数据6</view>
    <view>商品数据7</view>
    <view>商品数据8</view>
    <view>商品数据9</view>
    <view>商品数据10</view>
    <view>商品数据11</view>
    <view>商品数据12</view>
    <view>商品数据13</view>
    <view>商品数据14</view>
    <view>商品数据15</view>
    <view>商品数据16</view>
</scroll-view>
<!-- 右侧商品数据 结束 -->
</view>
</view>
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
93
94
95
96
97
98
99
100
101

.cates{
    height: 100%;
    .cates_container{
        height: ~'calc(100vh - 90rpx)';
        display: flex;
        .left_menu{
            flex: 2;
            background-color: aqua;
        }
        .right_content{
            flex: 5;
            background-color: blueviolet;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15