本文共 6649 字，大约阅读时间需要 22 分钟。

要在mpvue中实现如下的分类的页面：

代码如下(微信原生小程序的语法已改成mpvue的，图片设计的静态资源图片，你们自己去找需要的，这个只是参考）：

pages/toolbar/fenlei/index.vue

<template>	<view class="container">	 <scroll-view class='nav_left' scroll-y='true'>	    <block v-for="(item,index) in cateItems" :key="index">	      <!-- <view :class="{nav_left_items curNav==item.cate_id?'active':''}" @click="switchRightTab" :data-index='index' :data-id="item.cate_id">{  {item.cate_name}}</view> -->		  <view class="nav_left_items" :class="curNav==item.cate_id ? 'active':''" @click="switchRightTab" :data-index='index' :data-id="item.cate_id">{  {item.cate_name}}</view>		</block>	  </scroll-view>	  <scroll-view class="nav_right" scroll-y="true">	    <view v-if="cateItems[curIndex].children.length>0">	      <block v-for="(item,index) in cateItems[curIndex].children" :key="index">	        <view class="nav_right_items">	          <navigator url="#">	            <image :src="item.image"></image>	            <text>{  {item.name}}</text>	          </navigator>	        </view>	      </block>	    </view>	    <view class="nocate" wx:else>	      <image src="../../../static/tabrIcon/nav-appmgt-active.png"></image>	      <text>该分类暂无数据</text>	    </view>	  </scroll-view>	</view></template><script>// import nodata from '../../../components/owner/nodata.vue';// import divider from '../../../components/owner/divider.vue';// import echarts from '../../../components/echarts/echarts.simple.min.js';// import mpvueEcharts from 'mpvue-echarts';export default {	components: {		// nodata,		// divider,		// mpvueEcharts	},	data() {		return {			cateItems:[			      {			        cate_id:1,			        cate_name:'洗护',			        children: [			          { 			            child_id: 1, 			            name: '洁面皂', 			            image: "../../../static/images/lefttwo.png" 			          }, 			          { 			            child_id: 2, 			            name: '卸妆', 			            image: "../../../static/images/icon4.png"  			          },					  {					    child_id: 3, 					    name: '洗发水', 					    image: "../../../static/images/icon4.png"  					  },					  {					    child_id: 4, 					    name: '保湿水', 					    image: "../../../static/images/icon4.png"  					  },					  {					    child_id: 5, 					    name: '粉底液', 					    image: "../../../static/images/icon4.png"  					  },{ 			            child_id: 6, 			            name: '小蓝瓶', 			            image: "../../../static/images/icon4.png"  			          },					  {					    child_id: 7, 					    name: '卸妆', 					    image: "../../../static/images/icon4.png"  					  },					  {					    child_id: 8, 					    name: '洁面皂', 					    image: "../../../static/images/biandianzhan.png" 					  },					  {					    child_id: 9, 					    name: '香皂', 					    image: "../../../static/images/biandianzhan.png" 					  },					  {					    child_id: 10, 					    name: '肥皂', 					    image: "../../../static/images/biandianzhan.png" 					  },					  {					    child_id: 11, 					    name: '洗洁精', 					    image: "../../../static/images/biandianzhan.png" 					  },					  {					    child_id: 12, 					    name: '洁面皂', 					    image: "../../../static/images/biandianzhan.png" 					  },					  {					    child_id: 13, 					    name: '香皂', 					    image: "../../../static/images/biandianzhan.png" 					  },					  {					    child_id: 14, 					    name: '肥皂', 					    image: "../../../static/images/biandianzhan.png" 					  },					  {					    child_id: 15, 					    name: '洗洁精', 					    image: "../../../static/images/biandianzhan.png" 					  },					  {					    child_id: 16, 					    name: '洁面皂', 					    image: "../../../static/images/biandianzhan.png" 					  },					  {					    child_id: 17, 					    name: '香皂', 					    image: "../../../static/images/biandianzhan.png" 					  },					  {					    child_id: 18,					    name: '肥皂', 					    image: "../../../static/images/biandianzhan.png" 					  },					  {					    child_id: 19, 					    name: '洗洁精', 					    image: "../../../static/images/biandianzhan.png" 					  }			        ]			      },			      {			        cate_id:2,			        cate_name:'生鲜'			      },			      {			        cate_id:3,			        cate_name:'食品'			      },			      {			        cate_id: 4,			        cate_name: '女装'			      },			      {			        cate_id: 5,			        cate_name: '百货'			      },			      {			        cate_id: 6,			        cate_name: '母婴'			      },			      {			        cate_id: 7,			        cate_name: '手机'			      },			      {			        cate_id: 8,			        cate_name: '鞋靴'			      },			      {			        cate_id: 9,			        cate_name: '运动'			      },			      {			        cate_id: 10,			        cate_name: '美家'			      },			      {			        cate_id: 11,			        cate_name: '男装'			      },			      {			        cate_id: 12,			        cate_name: '水果'			      },			      {			        cate_id: 13,			        cate_name: '电子',					children: [					  { 					    child_id: 1, 					    name: '洁面皂', 					    image: "../../../static/images/biandianzhan.png" 					  },					]			      }			    ],			    curNav:1,			    curIndex:0		};	},	methods: {		switchRightTab(e){		    let id = e.target.dataset.id,index=e.target.dataset.index;			this.curNav = id;			this.curIndex = index;		  },	}};</script><style src="../../../global/global.css"></style><style src="../fenlei/fenlei.css"></style>

pages/toolbar/fenlei/fenlei.css:

.container{  position:fixed;  width:100%;  height:100%;  background-color:#FFF;}.nav_left{  width:25%;  height:100%;  background:#F2F2F2;  text-align:center;  position:absolute;  top:0;  left:0;}.nav_left .nav_left_items{  height:100rpx;  line-height:100rpx;  font-size:28rpx;}.nav_left .nav_left_items.active{  position:relative;  background:#FFF;  color:#FF5000;}.nav_left .nav_left_items.active::before{  display: inline-block;  width:6rpx;  height:60rpx;  background:#FE5723;  content:'';  position:absolute;  top:20rpx;  left:0;}.nav_right{  position:absolute;  top:0;  right:0;  width:75%;  height:100%;} .nav_right .nav_right_items{  float: left;     width: 33.33%;   text-align: center;    padding:30rpx 0;} .nav_right .nav_right_items image{  width: 120rpx;    height: 120rpx; } .nav_right .nav_right_items text{  display: block;    margin-top: 20rpx;    font-size: 28rpx;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;  } .nocate{  padding:100rpx;  text-align: center;  }  .nocate image{  width:70rpx;  height:70rpx;}.nocate text{  font-size:28rpx;  display:block;  color:#BBB;}/*隐藏滚动条*/::-webkit-scrollbar{  width: 0;  height: 0;  color: transparent;}

说明：

也许你们看的是另外一篇，我是参考那偏原生的语法，改成mpvue需要的语法，基本就是vue的语法： 如果：wx:for 改成 v-for 、wx:if 改成 v-if、this.setData({ curNav:id, curIndex:index })改成 this.curNav = id;this.curIndex = index

参考：

[1].