新手uni-app框架纯手写微信小程序开发左侧滑动菜单

原来到最后才发现有些东西，没有就真的没有。不行，就真的不行

唠叨一会

在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件（但是使用插件是真的香，一直用一直香），在大佬的指引下学会自己去写写简单且容易实现的东西，左侧滑动菜单，枫瑞上次学习的接口是分成了一级和二级，看到的时候整个人是奔溃的，内心mmp写不来

学习过程

1.记得不清楚了，大概的数据传过来是这样子的，可以得知一二级分类关系是通过classID来判断的，就用百度的QQ头像做了一个示范，可能百度给头像图片有点av画质

一级栏目

// 一级目录
catalog: [{
	id: 1,
	classID: 10,
	title: '手绘',
	img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2976715883,2639398091&fm=11&gp=0.jpg"
	}, {
	id: 2,
	classID: 20,
	title: '女生',
	img: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4066755054,2764834825&fm=15&gp=0.jpg"
	}, {
	id: 3,
	classID: 30,
	title: '男生',
	img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595308768160&di=f8c212b6273be95f6f658c34999ab4a2&imgtype=0&src=http%3A%2F%2Fdiy.qqjay.com%2Fu%2Ffiles%2F2012%2F0510%2F25c1770e108250f8a14cbc468c2030bf.jpg"
}],

二级栏目

// 二级目录
	second: [{
		id: 16,
		classID: 10,
		title: '真人转手绘',
		img: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2994867177,1065982860&fm=15&gp=0.jpg"
},{
		id: 18,
		: 10,
		title: '超美手绘',
		img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2058213453,278814451&fm=26&gp=0.jpg"
},{
		id: 22,
		classID: 20,
		title: 'jk裙',
		img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3250180386,4070277844&fm=26&gp=0.jpg"
},{
		id: 22,
		classID: 20,
		title: '原宿风裙',
		img: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595309099259&di=ee23a382f2dd9142e8525363eeaccf2c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201602%2F06%2F20160206231851_EvjHa.jpeg"
} ]

2.左右栏目scroll-view结构

scroll-view我是分成了左右2个，一个30%另外一个70%。然后渲染数据过去，

<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-left">
	<view class="left-view" v-for="(cate,index) in catalog" :key="index">
		{{ cate.title }}
	</view>
</scroll-view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-right">
	<view class="right-view-ww" v-for="(cla,index) in actiList" :key="index">
		<view class="right-view" >
			<image class="fengrui-img" :src="cla.img" mode=""></image>
		</view>
		<view class="">
			{{ cla.title }}
		</view>
	</view>
</scroll-view>

3.左侧菜单点击

我们应该进来的时候默认选择“手绘”栏目，背景要为蓝色做选中区分，而且还得实现我点击第二个选项卡的时候 会切换选中状态。我们在左侧菜单的循环的时候添加一个三目运算

:class="active == index ? 'seclct-left-view':'left-view'

随后添加一个点击事情，传index参数过去

@tap="actiLeft(index)"

执行函数

actiLeft:function(index){
	var that = this;
	that.active = index;
}

实现了选择不同的菜单切换状态

左侧完整代码块

<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-left">
	<view :class="active == index ? 'seclct-left-view':'left-view' " v-for="(cate,index) in catalog" :key="index" @tap="actiLeft(index)">
		{{ cate.title }}
	</view>
</scroll-view>

4.右侧内容切换

我们右侧的内容会随着点击不同左侧菜单变化而变化，可以得知一二级分类关系是通过classID来判断的根据左侧的tap事件我们写下函数

actiLeft:function(index){
	var that = this;
	that.active = index;
	var firstID = that.catalog[index].classID;
	console.log(firstID)
	var actiList = that.second.filter(function(x){
		return  x.classID == firstID;
	});
	console.log(actiList)
	that.actiList = actiList;
}

这是时候就会发现，我们一开始进去 是白屏的，只有点击了第一个选项卡后才会出现内容，处理方式是在页面打开的时候自动执行该函数且该他一个默认值

onLoad() {
	this.actiLeft(0);
},

总结

学习的内心mmp，写出来的时候：“啊咧，这TM也可以？算了不管了，能运行就行”

源码下载

链接: https://pan.baidu.com/s/1Wz43cVCos3HysOqpNeFAIQ 提取码: 4n17

彩泥西环：

Vue实战-开发移动端音乐WebApp

MUI全套视频教程 MUI实战项目源码 仿携程APP

Adobe Illustrator photoshop 2019破解windows版