【转】uni-app框架纯手写微信小程序开发左侧滑动菜单
本帖最后由 fengrui99 于 2020-7-22 14:38 编辑原文来自：https://www.frbkw.com/2923/
在学习的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;
}
实现了选择不同的菜单切换状态
4.右侧内容切换我们右侧的内容会随着点击不同左侧菜单变化而变化，
可以得知一二级分类关系是通过classID来判断的根据左侧的tap事件我们写下函数
ctiLeft:function(index){
var that = this;
that.active = index;
var firstID = that.catalog.classID;
console.log(firstID)
var actiList = that.second.filter(function(x){
returnx.classID == firstID;
});
console.log(actiList)
that.actiList = actiList;
}
这是时候就会发现，我们一开始进去 是白屏的，只有点击了第一个选项卡后才会出现内容，
处理方式是在页面打开的时候自动执行该函数且该他一个默认值
onLoad() {
this.actiLeft(0);
},
总结
学习的内心mmp，写出来的时候：“啊咧，这TM也可以？算了不管了，能运行就行”
源码下载链接: https://pan.baidu.com/s/1Wz43cVCos3HysOqpNeFAIQ 提取码: 4n17 可以把左侧固定，然后只用一个scroll-view。 值得点赞， 有生之莲 发表于 2020-7-22 15:33
可以把左侧固定，然后只用一个scroll-view。
哈哈哈 是哦 ，都忘记了 还可以这样 eoven8 发表于 2020-7-22 16:38
值得点赞，
哈哈 谢谢 老铁{:17_1062:}
页:
[1]