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

最新推荐文章于 2024-08-20 23:54:19 发布

白料少年头

最新推荐文章于 2024-08-20 23:54:19 发布

阅读量5.8k

点赞数 6

分类专栏： uniapp 文章标签： vue vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_42642780/article/details/106724806

版权

本文介绍了如何在Vue和UniApp中利用Swiper组件实现左侧菜单栏与右侧内容的交互。通过点击标题改变颜色、设置swiper组件实现内容滑动切换，以及使用uni.$emit、uni.$on、uni.$off进行兄弟组件间的通信，从而完成菜单栏与内容的联动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人小白最近在学习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

最低0.47元/天解锁文章