大家好！
这一章我们将上一章获取的所有接口数据变成页面标签。
首先，先来看一下分类页面有哪些标签结构，如下图所示分为三大块：
1、标题文字：商品的分类
2、搜索框
3、内容部分：左右两侧。并且左（右）边发生滚动时，右（左）边不动。
明确分类页面的标签结构后，一起来写代码吧！！！
1、 找到pages-category-index.json文件，修改标题文字，代码如下：
{
"usingComponents": {},
"navigationBarTitleText": "商品分类"
}2、 加载自定义组件。
首先需要在当前页面进行声明，代码如下：
{
"usingComponents": {
"SearchInput":"../../components/SearchInput/SearchInput"
},
"navigationBarTitleText": "商品分类"
}3、 复制上方代码中的SearchInput，打开同文件夹下的index.wxml文件，写入如下代码：
<view class="cates">
<SearchInput></SearchInput>
</view>4、 将SearchInput粘贴至上面的view标签中，如下图：
保存，小程序的分类页面中已出现标题和搜索框，如下图：
这样，我们就完成了前两大步。
接下来，需要设置页面的内容了。
设置页面内容需要用到一个重要的组件——scroll-view组件，它用来设置页面的滚动效果。
点击微信开放文档（扩展链接中），具体了解一下它的属性和使用。
由上图可知，要想让页面实现2种不同形式的滚动，只需加入如下2个属性：
并且，以下两个属性可设置滚动的距离：
我们来具体操作一下吧：
1、 先搭框架。
在index.wxml文件中写入代码，分为两大块，左侧为菜单栏，右侧为商品内容部分，加入scroll-view组件和相关属性，代码如下：
<view class="cates">
<SearchInput></SearchInput>
<view class="cates_container">
<!-- 左侧菜单 -->
<scroll-view class="left_menu">
</scroll-view>
<!-- 右侧商品内容 -->
<scroll-view class="right_content"></scroll-view>
</view>
</view>2、 将分类页面看作一个伸缩盒子，左边菜单栏占一部分，右边商品栏占一部分。
在category文件夹中新建文件index.less文件，并将index.wxml文件中的标签复制至less文件中，如下图：
3、 完善index.less文件中各标签的样式，代码如下：
同时，在index.wxss文件中写入如下代码：
page {
height: 100%;
}
.cates {
height: 100%;
}
.cates .cates_container {
/* less中使用calc的时候要注意 */
height: calc( 100vh - 90rpx );
}4、 在index.less文件中加入伸缩盒子，并分为2个子盒子，高度均为100%，为2个子项设置不同的颜色，进行区分，如下图：
代码如下：
page{
height: 100%;
}
.cates{
height: 100%;
.cates_container{
height: ~'calc( 100vh - 90rpx )';
display: flex;
.left_menu{
/* 子项 高度 100% flex */
flex: 2;
background-color: aqua;
}
.right_content{
/* 子项 高度 100% flex */
flex: 5;
background-color: lawngreen;
}
}
}同时，在index.wxss文件中加入如下代码：
page {
height: 100%;
}
.cates {
height: 100%;
}
.cates .cates_container {
/* less中使用calc的时候要注意 */
height: calc( 100vh - 90rpx );
display: flex;
}
.cates .cates_container .left_menu {
/* 子项 高度 100% flex */
flex: 2;
background-color: aqua;
}
.cates .cates_container .right_content {
/* 子项 高度 100% flex */
flex: 5;
background-color: lawngreen;
}5、 完善scroll-view组件的各属性，在index.wxml文件中的左右菜单的scroll组件中都加入scroll-y属性，代码如下：
6、 将index.wxml文件中的左右两侧菜单的scroll组件中加入如下内容，代码如下：
<view class="cates">
<SearchInput></SearchInput>
<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>1</view>
<view>12</view>
<view>13</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>1</view>
<view>12</view>
<view>13</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>1</view>
<view>12</view>
<view>13</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>1</view>
<view>12</view>
<view>13</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>1</view>
<view>12</view>
<view>13</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>1</view>
<view>12</view>
<view>13</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>1</view>
<view>12</view>
<view>13</view>
</scroll-view>
</view>
</view>保存后，可看到页面已被分为两栏，均可实现上下滚动。
学会了吗？有疑问的欢迎下方留言区告诉我哦~~~