mpvue小程序中防商品联动分类下滑列表

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

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].微信小程序左侧竖形滑动菜单(仿淘宝分类界面)

上一篇:小程序开发:用原生还是选框架(wepy/mpvue/taro/uni-app)


下一篇:【直播报名】使用mpvue开发微信游戏小程序的最佳实践