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.25rpx;padding: 10% 15%;}
3.运行截图：
小程序教程地址：小程序教程集合地址
如果大家对文章有什么问题或者疑意之类的、想要源代码的、想看更多此类文章的，都可以可以加我订阅号，订阅号上面我会定期更新最新博客和资源。 如果嫌麻烦可以直接加我wechat：lzqcode