vue、uniapp使用swiper组件自定义左侧菜单栏和切换菜单

本人小白最近在学习vue和uniapp，分享一下最近实现的功能，希望大家可以指出错误！！！

说明：本文只讲述功能实现，不讲css样式

先贴一张实现功能的gif

结构分析：页面中左侧的菜单栏和右侧主要内容是两个组件，然后再把组件放在页面中

1.1 实现点击标题标题变色（shai）

（这里是左边栏组件）
(1) 左侧的边栏我也是用swiper组件，这里不使用这个组件也没事因为没用到该组件的功能

<view class="slidey">
<swiper class="swiper" vertical>//vertical表示是垂直方向的
<swiper-item>
//绑定了点击事件，点击给他添加样式，后面贴出点击的函数
<view v-for="(item,index) in categoryList" class="swiper-text" :class="test===index?'selectColor':''">
<view @click="selct(index)">{{item}}</view>
</view>
</swiper-item>
</swiper>
</view>

(2) selectColor选中的标题给它添加样式

.selectColor{
color: #007AFF;
background-color: #ffffff;
}

data(){
return{
//左侧边栏的list
categoryList:['推荐','手机','声学','配件','生活'],
test: 0 //表示进入页面默认选中边栏的第一个标题
}
},
methods:{
selct(index){
//将选中的下标index传给test
this.test = index
}
},

(3) 这段代码是前面for循环中的代码，在这里解释一下，动态给class传值，点击事件把index传给默认值为0的test，当index=1，test=1，则index为1的边栏标题才会有selectColor的样式

:class="test===index?'selectColor':''"

1.2实现右边主要内容

（这里是右边主要内容组件）

(1) 这里的swiper的组件就派上用场了，uiapp中swiper组件一般是来做轮播图的，但是这里功能实现也有这种滑动切换的效果，所有就用来实现该功能，效果很好

<view class="mainslidey">
//组件设置为vertical表示垂直方向，其他什么自动切换指示点都不加，current表示当前显示的是第几页，
//就是这个竖着的内容（相当于竖着的轮播图）
//@change是表示current发生变化触发的事件，后面才细讲，
//这里先提一下
<swiper class="swiper" vertical :current="current" @change="change"><swiper-item v-for="(item,index) in 5">
<image class="topImg" src="图片链接.jpg"></image>
//这里的textx是我自己定义的组件，无关紧要的
<textx backgroudColor="#ffffff" title="推荐"></textx>
//这里minchunk也是我自己定义的组件，显示手机的
<minchunk  ></minchunk>
</swiper-item>
</swiper>
</view>

(2) 给current动态赋默认值

data(){
return{
current: 0,//默认值为0表示进入页面显示竖着轮播图的第一页
}
},

1.3uni.$emit、uni.$on和uni.$off的介绍

(1) 要让两个组件关联起来，但是这两个组件不是父子关系的组件，他们是兄弟关系的组件所有这里用到uni.$emit、uni.$on和uni.$off

官方文档

官方提示：uni.$emit、 uni.$on 、uni.$off 触发的事件都是 App
全局级别的，跨任意组件，页面，nvue，vue 等,使用时，注意及时销毁事件监听

1.4左边栏点击切换右边主要内容

（这里是左边栏组件）
(1) 在左边栏组件内，前面的点击事件函数添加一行代码

methods:{
selct(index){
this.test = index
uni.$emit("changeMenu",index)
}
},

（这里是右边主要内容组件）
(2) 在右边主要内容中，添加两个钩子函数（不懂钩子函数的这里简单介绍，created表示，在实例创建完成后被立即调用，beforeDestroy就是销毁前调用），把左边栏传过来的index赋值给current（current就是前面定义的右边主要内容的页数）

created() {
uni.$on("changeMenu",index=>{
this.current = index
})
},
beforeDestroy(){//销毁自定义的监听器
uni.$off("changeMenu")
}

到这点击左边栏切换右边内容就实现了，但是发现右边滑动左边栏没有跟着滑动

1.5 实现右边主要内容的滑动，左边栏的标题也会跟着变化

（这里是右边主要内容组件）
(1) 这里前面绑定的事件就派上用场了，当current发生变化就会触发事件
注意：这里函数不要打括号或者传参数，不然获取不到当前的页数

<swiper class="swiper" vertical :current="current" @change="change">

(2) e表示该函数的回调函数，e是自己命名的，回调函数中detail.current为当前所在的页数

methods:{
change(e){
//这里要把当前所在的页数赋值给我们自己定义的current，
//因为当我滑动时自己定义的current不会变化，不给它赋值后面会有bug
//我一开始没发现，后面发现了才写上的
this.current = e.detail.current
//触发全局自定义的change事件
uni.$emit("change",e.detail.current)
}
},

（这里是左边栏组件）
(3) 左边栏同样在钩子函数中监听

created() {
uni.$on("change",current=>{
//把传过来的current赋值给test，这样左边栏就会跟着右边内容的变化而变化
this.test = current
})
},
beforeDestroy() {//记得销毁监听器
uni.$off("change")
}

结语：到这里基本的都实现了，本文如果出现什么错误，欢迎指出，欢迎评论，2020.6.13 0:15