显示商品分类列表页面

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.运行截图：

小程序教程地址：小程序教程集合地址

如果大家对文章有什么问题或者疑意之类的、想要源代码的、想看更多此类文章的，都可以可以加我订阅号，订阅号上面我会定期更新最新博客和资源。 如果嫌麻烦可以直接加我wechat：lzqcode