小程序左右滑动切换页面_新手uniapp框架纯手写微信小程序开发左侧滑动菜单

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

唠叨一会

在学习的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%。然后渲染数据过去，

      {{ cate.title }}                            {{ cla.title }}      

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事件我们写下函数

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