显示商品分类列表页面

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1433513

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

​

​