js设置padding_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标签内，代码如下：

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

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

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

关注我，一起学起来吧~~~~