显示商品分类列表页面

1.wxml页面代码:
< view class = "btn-sudoku">
< navigator url = "../listdetail/listdetail" class = "nav-item">
< image src = "../../images/type/subnav_01.png" mode = "aspectFit" class = "icon" / >
搜索
navigator >
< navigator url = "../listdetail/listdetail" class = "nav-item" >
< image src = "../../images/type/subnav_02.png" mode = "aspectFit" class = "icon" / >
客服
navigator >
< navigator url = "../listdetail/listdetail" class = "nav-item" >
< image src = "../../images/type/subnav_03.png" mode = "aspectFit" class = "icon" / >
订单
navigator >
< navigator url = "../listdetail/listdetail" class = "nav-item" >
< image src = "../../images/type/subnav_04.png" mode = "aspectFit" class = "icon" / >
收藏
navigator >
< navigator url = "../listdetail/listdetail" class = "nav-item" >
< image src = "../../images/type/subnav_05.png" mode = "aspectFit" class = "icon" / >
团购
navigator >
< navigator url = "../listdetail/listdetail" class = "nav-item" >
< image src = "../../images/type/subnav_06.png" mode = "aspectFit" class = "icon" / >
预售
navigator >
< navigator url = "../listdetail/listdetail" class = "nav-item" >
< image src = "../../images/type/subnav_07.png" mode = "aspectFit" class = "icon" / >
秒杀
navigator >
< navigator url = "../listdetail/listdetail" class = "nav-item" >
< image src = "../../images/type/subnav_08.png" mode = "aspectFit" class = "icon" / >
活动
navigator >
view >
2.wxss页面代码:
/* 所有分类显示 */
.btn-sudoku { display: flex ; justify-content: space-between ; flex-wrap: wrap ; background: #fff }
.btn-sudoku .nav-item { width: 25% ; text-align: center }
.btn-sudoku .icon { width: 70% ; height: 131.25 rpx ; padding: 10% 15% ;}

3.运行截图:
显示商品分类列表页面_第1张图片
小程序教程地址:小程序教程集合地址
如果大家对文章有什么问题或者疑意之类的、想要源代码的、想看更多此类文章的,都可以可以加我订阅号,订阅号上面我会定期更新最新博客和资源。 如果嫌麻烦可以直接加我wechat:lzqcode
显示商品分类列表页面_第2张图片

你可能感兴趣的:(小程序,小程序开发)