全国服务热线:4008-888-888

微信小程序

怎么制作网页教程

怎么制作网页教程

详情介绍

怎么制作网页教程:15. 小程序项目实战:设置分类页面布局(2)

朋友们!

上一章我们设置了分类页面的页面标签,

这一章我们继续。

话不多说,我们一起操练起来吧~

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

class="menu_item {{index===currentIndex?'active':''}}"
wx:for="{{leftMenuList}}"
wx:key="*this"
{{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标签内,代码如下:


保存,如下图。“大家电”标题已被激活选中!


这一章加上上一章我们已将“分类页面”的页面标签全部设置完成,下一章一起来设置左侧不同标题切换的菜单。

最后的最后:



特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服