效果：

包含图片、文字，分列布局，点击对应图标跳转到相应界面

WXML：

<!-- 三个主要功能:文书服务，在线咨询，律师匹配跳转到对应页面，可以返回注意php后台和数据库搭建--><view class="task_cate"><navigatorclass='cate_text {{index == cateActive ? "cate_text_active" : ""}}'url="./{{item.path}}/{{item.path}}?title=redirect"hover-class="other-navigator-hover"open-type="redirect" 	wx:for="{{cateArr}}" class="cate_item" wx:key="cate" bindtap="clickCate" data-index="{{index}}"			 > <view class="cate_icon"> <image src="../../images/index/{{item.icon}}.png"></image> </view><view class='cate_text {{index == cateActive ? "cate_text_active" : ""}}'>{{item.text}}</view></navigator>  
</view>

WXSS：

/* 图标样式 */
.task_text{height: 120rpx;margin: 40rpx auto;text-align: center;
}
.task_text .task_title{font-size: 35rpx;height: 70rpx;line-height: 70rpx;
}
.task_text .task_desc{font-size: 30rpx;height: 50rpx;line-height: 50rpx;color: #999999;
}
.task_cate{width: 660rpx;margin: 0 auto;display: flex;flex-wrap: wrap;margin-top: 40rpx;
}
.task_cate .cate_item{width: 220rpx;height: 150rpx;text-align: center;margin-bottom: 50rpx;}
.task_cate .cate_item .cate_icon{height: 130rpx;
}
.task_cate .cate_item .cate_icon image{width: 120rpx;height: 110rpx;
}
.task_cate .cate_item .cate_text{height: 60rpx;line-height: 30rpx;font-size: 30rpx;color:#555858;
}
.task_cate .cate_item .cate_text_active{color: #ffb5b5;
}

JavaScript：

// pages/index/index.js
Page({data: {cateArr:[{icon: 'icon1_paper',text: '文书服务',path:'p1_paperwork'},{icon: 'icon2_insult',text: '在线咨询',path:'p2_onlineinquiry'},{icon: 'icon3_lawyer',text: '律师匹配',path:'p3_lawyermatch'}]},})

待修改之处：若要修改大小需要手动计算，应优化为根据rpx的规则，输入列数，自动导入icon、text、path的组件