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

fengrui99

原文来自：https://www.frbkw.com/2923/


在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件（但是使用插件是真的香，一直用一直香）
在大佬的指引下学会自己去写写简单且容易实现的东西，左侧滑动菜单

上次学习的接口是分成了一级和二级，看到的时候整个人是奔溃的，内心mmp写不来


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

[Asm] 纯文本查看 复制代码

// 一级目录
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"
}],

二级栏目

[Asm] 纯文本查看 复制代码

// 二级目录
        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%。然后渲染数据过去

[Asm] 纯文本查看 复制代码

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

[Asm] 纯文本查看 复制代码

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

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

[Asm] 纯文本查看 复制代码

@tap="actiLeft(index)"

执行函数

[Asm] 纯文本查看 复制代码

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

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

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

[Asm] 纯文本查看 复制代码

ctiLeft: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;
}

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

[Asm] 纯文本查看 复制代码

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

总结


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

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

有生之莲

可以把左侧固定，然后只用一个scroll-view。

eoven8

值得点赞，

fengrui99

有生之莲 发表于 2020-7-22 15:33
可以把左侧固定，然后只用一个scroll-view。

哈哈哈 是哦 ，都忘记了 还可以这样

fengrui99

eoven8 发表于 2020-7-22 16:38
值得点赞，

哈哈 谢谢 老铁