15.小程序项目实战：设置分类页面布局（2）

上一章我们设置了分类页面的页面标签，这一章我们继续标签设置格局。

话不多说标签设置格局，我们一起操练起来吧~

1、 在index.wxml文件中标签设置格局，先将左右两侧的scroll-view标签的内容都删除，加入如下代码：

                       {{item}}                                  

保存，页面呈现如下标签设置格局。可看到左侧菜单的各项均已显示：

2、 给左侧菜单栏加样式标签设置格局。

打开文件index.less标签设置格局，去掉2个颜色，操作如下：

并将index.wxml文件中的menu_item复制至less文件中标签设置格局，加入如下代码：

同时在index.wxss文件中删除颜色2行标签设置格局，如下图：

加入如下代码：

.cates .cates_container .left_menu .menu_item {  height: 80rpx;  display: flex;  justify-content: center;  align-items: center;  font-size: 30rpx;}

保存标签设置格局，页面呈现如下：

3、设置右侧商品栏的标题标签设置格局。

由小程序原来的样式可知标签设置格局，右侧的"电视"、"空调"、"洗衣机"均为伸缩盒子，如下图：

说明右侧的商品栏的设置也须一层循环结构来实现标签设置格局。

所以标签设置格局，我们在index.wxml文件中，写入view标签，代码如下：

这就表示右侧整个商品栏了~

里面再分为两层：标题（goods_title）、内容（goods_list）标签设置格局，代码如下：

保存，可看到标题已全部出现标签设置格局。

注意：

图中的"rightContent"由index.js文件中的rightContent复制来（已赋值）标签设置格局，如图所示：

"right_Content"由调试器中的AppData复制来标签设置格局，如下图：

4、给各标题下加内容标签设置格局。

在index.wxml中标签设置格局，右侧商品内容下，给内加入超链接代码：

其中标签设置格局，children由调试器中AppData中rightContent-0-children 中复制而来：

cat_id、cat_icon、cat_name 均由调试器中AppData中rightContent-0-children 中复制而来标签设置格局，见下图：

保存，效果已出现，但左边标签被右侧商品栏挤压，须再添加一些小样式标签设置格局。

5、在index.less文件中标签设置格局，加入goods_group、goods_title、goods_list （均由index.wxml中复制而来），代码如下：

同时在index.wxss文件中标签设置格局，加入代码：

.cates .cates_container .right_content .goods_group .goods_list {  display: flex;  flex-wrap: wrap;}.cates .cates_container .right_content .goods_group .goods_list navigator {  width: 33.33%;  text-align: center;}

保存，如下图标签设置格局。

可以看到已经有一定效果了~但是有一些样式还是不合适标签设置格局。

在小程序中，图片的宽度一般为100%（由外层容器所决定）标签设置格局。

我们可在app.wxss中加入一行代码，即可解决标签设置格局。代码如下：

保存后，可看到左侧的小程序样式已经好多了标签设置格局。

6、优化剩下的细节标签设置格局。

对比成型前后的小程序标签设置格局，可看到原图中的"电视"标签是有"/ /"的；

同时里面商品的图片没这么大；

文字水平也水平居中标签设置格局。

对此，我们就进行优化吧标签设置格局。

（1） 在index.wxml文件中标签设置格局，修改代码如下：

（2） 在index.less文件中标签设置格局，加入如下代码：

 .goods_title{          height: 80rpx;          display: flex;          justify-content: center;          align-items: center;          .delimiter{            color: #ccc;            padding: 0 10rpx;          }          .title{}        }

（3） 在index.wxss文件中标签设置格局，加入如下代码：

.cates .cates_container .right_content .goods_group .goods_title {  height: 80rpx;  display: flex;  justify-content: center;  align-items: center;}.cates .cates_container .right_content .goods_group .goods_title .delimiter {  color: #ccc;  padding: 0 10rpx;}

保存标签设置格局，如下图所示，标题已搞定：

（4） 在index.less文件中标签设置格局，补充两行代码：

（5） 在index.wxss文件中标签设置格局，加入如下代码：

.cates .cates_container .right_content .goods_group .goods_list navigator {  width: 33.33%;  text-align: center;}.cates .cates_container .right_content .goods_group .goods_list navigator image {  width: 50%;}

保存，如下图标签设置格局。可看到与原型已经很相似了！

7、最后一步，设置左侧菜单栏的激活选中效果标签设置格局。

（1） 在index.less文件中标签设置格局，找到.menu_item，与它同层级写入.active{}，{}里面的代码如下：

其中标签设置格局，文字的颜色为主题颜色；

左边框为5rpx，颜色为字体的颜色标签设置格局。

（2） 在index.wxss文件中标签设置格局，加入如下代码：

.cates .cates_container .left_menu .active {  color: var(--themeColor);  border-left: 5rpx solid currentColor;}

（3） 在index.js文件中标签设置格局，加入如下代码：

（4） 在index.wxml文件中标签设置格局，将currentIndex复制至class标签内，代码如下：

保存，如下图标签设置格局。"大家电"标题已被激活选中！

这一章加上上一章我们已将"分类页面"的页面标签全部设置完成标签设置格局，

下一章一起来设置左侧不同标题切换的菜单标签设置格局，

关注我标签设置格局，一起学起来吧~~~~