微信小程序|icon列表跳转不同界面

效果：

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

WXML：

<!-- 三个主要功能:文书服务，在线咨询，律师匹配
    跳转到对应页面，可以返回
    注意php后台和数据库搭建
  -->
  <view class="task_cate">
    <navigator
          class='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的组件