实现效果如图：
在wxml中设置：
<view class="view_list">
<view class="view_item"> <view class="view_type"> <navigator url="wenzi/wenzi" open-type="navigate" class="navigate_item"> <image src="../images/wenziicon.png" class="swiper_head" mode="aspectFit" /> 识文字 </navigator> </view> </view>
<view class="view_item"> <view class="view_type"> <navigator url="shenfenzheng/shenfenzheng" open-type="navigate" class="navigate_item"> <image src="../images/shenfenzhengicon.png" class="swiper_head" mode="aspectFit" /> 身份证 </navigator> </view> </view>
<view class="view_item"> <view class="view_type"> <navigator url="jiashizheng/jiashizheng" open-type="navigate" class="navigate_item"> <image src="../images/jiashizhengicon.png" class="swiper_head" mode="aspectFit" /> 驾驶证 </navigator> </view> </view>
<view class="view_item"> <view class="view_type"> <navigator url="wupin/wupin" open-type="navigate" class="navigate_item"> <image src="../images/wupinicon.png" class="swiper_head" mode="aspectFit" /> 识物品 </navigator> </view> </view>
<view class="view_item"> <view class="view_type"> <navigator url="zhiwu/zhiwu" open-type="navigate" class="navigate_item"> <image src="../images/zhiwuicon.png" class="swiper_head" mode="aspectFit" /> 识植物 </navigator> </view> </view>
<view class="view_item"> <view class="view_type"> <navigator url="dongwu/dongwu" open-type="navigate" class="navigate_item"> <image src="../images/dongwuicon.png" class="swiper_head" mode="aspectFit" /> 识动物 </navigator> </view> </view>
<view class="view_item"> <view class="view_type"> <navigator url="chexing/chexing" open-type="navigate" class="navigate_item"> <image src="../images/chexingicon.png" class="swiper_head" mode="aspectFit" /> 识车型 </navigator> </view> </view>
<view class="view_item"> <view class="view_type"> <navigator url="yinhangka/yinhangka" open-type="navigate" class="navigate_item"> <image src="../images/yinhangkaicon.png" class="swiper_head" mode="aspectFit" /> 银行卡 </navigator> </view> </view>
<view class="view_item"> <view class="view_type"> <navigator url="fanyi/fanyi" open-type="navigate" class="navigate_item"> <image src="../images/fanyiicon.png" class="swiper_head" mode="aspectFit" /> 翻译 </navigator> </view> </view>
</view>在wxss中设置代码
.view_list { width: 95%; height: 100%; /* margin-top: 20rpx; */ column-count: 3; /* 设置或检索对象的列与列之间的间隙为2px */ column-gap: 10rpx;}
.view_item { width: 100%; height: 250rpx; position: relative; display: inline-block; /* display: flex; */ flex-direction: column; align-items: center; justify-content: center;}
.view_type { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.navigate_item { width: 130rpx; height: 130rpx; padding: 30rpx; background-color: #2880fe; color: white; border-radius: 20rpx; display: flex; flex-direction: column; align-items: center;}小程序体验效果：
