uniapp-实现左侧菜单栏与右侧功能区联动~（保姆级）个人思路，需求实测实现啦~

已于 2024-08-13 20:54:30 修改
阅读量877 收藏 6
点赞数 4
文章标签： uni-app
于 2024-07-19 23:03:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62626838/article/details/140561112
版权

1、需求1：实现左侧菜单栏与右侧功能区联动~。当点击切换左侧菜单栏时需变色同时需将其对应右侧功能区节点滑动至顶部。

2、需求2：实现滑动右侧功能区，当其所处的功能区节点刚刚触顶时，需切换左侧菜单栏与之对应。

3、效果如下：

4、代码实现

需求1:

html

<!-- 侧边栏 -->
<view class="aside-main">
	<scroll-view scroll-y class="scroll-Y1" :style="'height:'+ mainH" scroll-with-animation>
		<view :class="num==index?'active':''" v-for="(item,index) in asideList" :key="index" @click="asid(index)">{{item.title}}
		</view>
	</scroll-view>
	<!-- 右侧滑动区 -->
	<scroll-view scroll-y class="scroll-Y2" :style="'height:'+ mainH" :scroll-into-view="rightview" scroll-with-animation @scroll="scrollright" @scrolltoupper="scrolltop" @scrolltolower="scrollbuttom">
		<!-- 功能区节点 -->
		<view v-for="(item,index) in asideList" :key="index" class="min" :id="'rightIndex'+index">
		    <view v-for="(i,j) in item.list" :key="j" class="minmi">
			    <image :src="i.url" class="min-img"></image>
			    <text>{{item.title}}</text>
		    </view>
	    </view>
    </scroll-view>
</view>

css

js

// 侧边栏切换
asid(index) {
// 变色
	this.num = index
	// 通过uniapp的scroll-into-view实现与右侧功能区节点的切换联动
	this.rightview = 'rightIndex' + index
},

需求2：

js

5、需求实测实现啦~

炒毛豆也是刚刚接触小程序。3年后台经验。后续会将学习心得不定时记录~（仅做个人笔记使用）

完整代码：

<template>
	<view>
		<!-- 适配小程序 -->
		<!-- #ifdef MP -->
		<!-- 头部搜索栏 -->
		<!-- 使用组件，可参考uniapp的esaycomezi组件 -->
		<search>
			<!-- 具名插槽 -->
			<view slot="left">
				<img src="@/static/images/扫码.png" class="icon" @click="re()" />
			</view>

			<div class="serch" slot="center">
				<img src="@/static/images/搜索.png" class="icon1" />
				<input type="search" placeholder="搜索..." placeholder-style="place" @click="searchTo()" />
			</div>
			<button class="btn" slot="right">搜索</button>
		</search>
		<!-- #endif -->

		<!-- 内容区 -->
		<!-- 侧边栏 -->
		<view class="aside-main">
			<scroll-view scroll-y class="scroll-Y1" :style="'height:'+ mainH" scroll-with-animation>
				<view :class="num==index?'active':''" v-for="(item,index) in asideList" :key="index"
					@click="asid(index)">{{item.title}}
				</view>
			</scroll-view>
			<!-- 右侧滑动区 -->
			<scroll-view scroll-y class="scroll-Y2" :style="'height:'+ mainH" :scroll-into-view="rightview"
				scroll-with-animation @scroll="scrollright" @scrolltoupper="scrolltop" @scrolltolower="scrollbuttom">
				<!-- 功能区节点 -->
				<view v-for="(item,index) in asideList" :key="index" class="min" :id="'rightIndex'+index">
					<view v-for="(i,j) in item.list" :key="j" class="minmi">
						<image :src="i.url" class="min-img"></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mainH: 400,
				num: 0,
				leftview: '',
				rightview: '',
				// 所有的节点坐标
				nodes: [],
				asideList: [{
						title: "手机",
						list: [{
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}]
					},
					{
						title: "电脑",
						list: [{
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}]
					},
					{
						title: "华为",
						list: [{
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}]
					},
					{
						title: "小米",
						list: [{
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}]
					},
					{
						title: "苹果",
						list: [{
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}, {
							url: "../../static/images/sex5.jpg"
						}]
					},
					{
						title: "vivo",
						list: [{
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}, {
							url: "../../static/images/sex2.jpg"
						}]
					}
				]
			}
		},
		created() {
			// 调用uniapp的api获取系统信息,如浏览器可视区高度
			// 实现向下滑动,只有内容区可以滑动
			uni.getSystemInfo({
				success: (res) => {
					// 将upx转换成px
					// 可视区高度减去导航栏高度
					this.mainH = res.windowHeight - uni.upx2px(88) + 'px';
				}
			})
			// 得到页面加载完成时所有的.min节点的坐标位置,主要为top值
			this.coordinate()
		},
		methods: {
			// 扫码
			re() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			// 搜索
			searchTo() {
				// 跳转路由，跳转到搜索页面
				uni.navigateTo({
					url: "../searchmain/searchmain"
				})
			},
			// 侧边栏切换
			asid(index) {
				// 变色
				this.num = index
				// 通过uniapp的scroll-into-view实现与右侧功能区节点的切换联动
				this.rightview = 'rightIndex' + index
			},
			// 滑动触顶事件
			scrolltop() {
				this.num = 0
			},
			// 滑动触底事件
			scrollbuttom() {
				this.num = this.nodes.length - 1
			},
			// 滑动右边内容区实现与左侧菜单栏联动效果
			// 监听滑动事件
			scrollright(e) {
				// 每一次滑动之前都做一遍跟随,用来解决侧边栏切换不联动问题（重要！！！不加是有bug的）
				this.asid()
				// 拿到滑动的距离(记住初始滑动距离是0！！很重要)
				console.log('滑动的距离', e.detail.scrollTop)
				// 遍历存储所有节点top坐标的数组nodes(默认从下标1开始，因为初始状态的左侧菜单栏与右侧功能区就是对应的！！)
				for (let i = 1; i < this.nodes.length; i++) {
					// 判断滑动的距离+初始节点的top值!!(这里就是为什么在上面特意提醒要牢记滑动距离的初始值是0的原因,这里将滑动距离加上初始节点的top值是为了将二者放在一个'水平线'上,便于后面比较)是否大于等于当前功能区节点的top值并且小于等于下一个的节点的top值，如果满足条件将切换左侧菜单栏变色的标识符num的值变为当前节点的i。同时需额外判断滑动的距离+初始节点的top值是否大于最后一个功能区节点的top值，因为如果不单独判断的话，原判断逻辑针对最后一个节点是满足不了并条件的。判断头部同理，同时需搭配触顶与触底事件。
					if (e.detail.scrollTop + this.nodes[0] >= this.nodes[i] && e.detail.scrollTop + this.nodes[0] <= this
						.nodes[i + 1]) {
						this.num = i
					} else if (e.detail.scrollTop + this.nodes[0] < this.nodes[1]) {
						this.num = 0
					} else if (e.detail.scrollTop + this.nodes[0] > this.nodes[this.nodes.length - 1]) {
						this.num = this.nodes.length - 1
					}
				}
			},
			// 获取右侧内容区每个指定节点的坐标信息(即左侧菜单栏所对应的每一个功能区的顶部坐标),该方法只在created生命周期中执行一遍即可
			coordinate() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll(".min").boundingClientRect((data) => {
					// 获取每一个功能区的全部坐标对象(数组形式)
					console.log("得到布局位置信息" + JSON.stringify(data));
					console.log("节点离页面顶部的距离为" + data.top);
					console.log(data)
					// 遍历每一个功能区的全部坐标对象(数组形式),拿到所有的top坐标
					for (let i = 0; i < data.length; i++) {
						console.log("每个节点的top坐标", data[i].top)
						// 将每个top坐标push进一个空数组nodes中
						this.nodes.push(data[i].top)
					}
					console.log("nodes", this.nodes)
				})
				.exec();
			}
		}
	}
</script>

<style>
	.active {
		color: red;
	}

	.min {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.minmi {
		display: flex;
		flex-direction: column;
	}

	.min-img {
		width: 150upx;
		height: 100upx;
	}

	.aside-main {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.scroll-Y1 {
		flex: 1;
		box-sizing: border-box;
	}

	.scroll-Y1 view {
		text-align: center;
		margin: 50upx;
	}

	.scroll-Y2 {
		flex: 3;
		box-sizing: border-box;
	}

	.scroll-Y2 view {
		text-align: center;
		/* margin:20upx; */
	}

	.icon {
		width: 50upx;
		height: 50upx;
		margin-top: 10upx;
	}

	.icon1 {
		width: 30upx;
		height: 30upx;
		position: absolute;
		top: 15upx;
		left: 10upx;
	}

	.btn {
		width: 140upx;
		height: 60upx;
		line-height: 60upx;
		margin: 0;
		padding: 0;
		font-size: 30upx;
	}

	.serch {
		height: 60upx;
		flex: 2;
		margin-left: 20upx;
		margin-right: 20upx;
		box-sizing: border-box;
		border: solid 1upx #ccc;
		border-radius: 10upx;
		position: relative;
	}

	.serch input {
		height: 60upx;

		margin-left: 60upx;
	}
</style>

行咘行啊细狗
关注
uniapp 手摸手实现左右菜单联动(vue2)
小白小白从不日别的博客
09-12 325
去获取当前的所有节点集合，再配合 scroll-view 的 scroll-top 属性，使其在点击左侧菜单栏的时候动态赋值右侧scroll-view 的 scroll-top 属性，从而实现点击左侧菜单栏时右侧内容区域进行滚动。
uniapp-scrollview实现双联动.zip
07-27
uniapp-scrollview实现双联动。点击标题，scrollview部分对应滑动。scrollview部分滑动，标题部分对应高亮
Uniapp实现左侧导航和右侧scroll-view联动
最新发布
weixin_47249500的博客
06-04 2706
1、点击左侧分类列表，高亮显示当前分类项，右侧scroll-view滑动到分类对应的位置。2、滑动右侧的scroll-view，左侧的分类列表高亮显示当前商品所属的分类。
uniapp 侧边选项卡（左右滚动）
Tianxiaoxixi的博客
07-09 5100
uniapp 侧边选项卡
uniapp联动左侧导航栏分类？
zybijiso666的博客
12-09 963
【代码】uniapp联动左侧导航栏分类？
uniapp仿美团左侧菜单栏
qq_43432157的博客
01-24 5276
uniapp仿美团左侧菜单栏 实现仿美团菜单页，效果图如下 主题内容 <template> <view class="deviceList"> <!-- 左侧菜单 --> <view class="findRoom-l"> <scroll-view scroll-y="true" style="background: #fff;"> <view class="scroll-item" @click="onScroll
左右菜单联动：轻松实现网页导航的高效与便捷！
CRMEB小程序商城的博客
12-18 1619
去获取当前的所有节点集合，再配合 scroll-view 的 scroll-top 属性，使其在点击左侧菜单栏的时候动态赋值右侧scroll-view 的 scroll-top 属性，从而实现点击左侧菜单栏时右侧内容区域进行滚动。
uniapp实战开发商城APP和小程序
03-30
课程包含Uniapp开发全端教程，课程由英特网络独家录制，购买课程后赠送后端CMS管理系统，可以修改商品及接口数据，同时CMS提供Uniapp所需要的全部API接口，包括课程内容：安卓证书申请/APP苹果打包/APP安卓打包/微信小程序发布/后端代码发布/H5打包发布/APP微信支付/APP支付支付/上拉加载下拉刷新/JWT生成Token认证等课程支持1对1售后服务，购买课程或售后服务、演示地址可以联系QQ:1901090033。
uni-app —— 小程序实现左右菜单联动
Bonsoir777的博客
11-11 5356
本文主要介绍小程序菜单的左右了联动实现过程
uniapp 侧边栏组件
weixin_50903205的博客
08-27 3201
uniapp 侧边栏组件
最详细、最简单的uniapp列表左右联动功能
Chanyto的博客
07-29 4717
首先左右联动的实现是基于点击高亮，列表滚动，这两个基础功能来实现的。所以我在获取了后端传来的数据后，使用active和index去确定我具体点击了哪个位置，就让哪个位置高亮 这个条件成立，我就调用名为active的样式。而后面的this.$emit是将点击后的index拼接传到父组件中，因为在右侧列表的位置判断上我需要用到。
uniapp使用uview组件实现省市区三级联动
06-29
在本文中，我们将深入探讨如何在uni-app框架中利用uView UI组件库来实现省市区三级联动的效果。uni-app是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，即可在iOS、Android、H5、小程序等多个平台运行。...
vue实现后台管理权限系统及顶栏三级菜单显示功能
10-16
本文将详细介绍如何使用Vue.js实现后台管理权限系统以及顶栏三级菜单的显示功能。 首先，我们要理解权限路由的思路。这个过程涉及到根据用户的角色（roles）信息来过滤出他们可以访问的路由。具体步骤如下： 1. **...
基于jQuery实现左侧菜单栏可折叠功能
10-20
要实现基于jQuery的左侧菜单栏可折叠功能，首先需要了解一些核心知识点，如jQuery选择器的使用、事件处理机制、CSS的display属性控制、DOM操作以及动画效果的实现。 首先，jQuery选择器允许开发者快速地选取页面上...
uniapp-菜单组件
04-11
uni-app 菜单组件，flex布局 <!-- author hzj email hzj_51it@aliyun.com wechat XHKJ_IT 菜单组件 v0.01 参数： 属性 类型 说明 top Number 菜单项距离顶部的位置 menuList Array 菜单具体项：url 需要跳转的...
uniapp中制作侧边导航栏
子玉的博客
12-10 2272
.sidebar-container`是一个Flex容器，其中包含了`.sidebar`和`.main-content`两个子元素。如果你想制作一个简单的侧边导航栏，并且不使用额外的组件库，可以使用uni-app提供的基础组件和样式来实现。`.sidebar`是侧边导航栏的容器，具有固定的宽度和背景色。`.sidebar-header`是导航栏的标题部分，`.sidebar-menu`是菜单项的容器。很抱歉，我之前提到的示例中使用的组件是基于Uni-app框架的组件库，使用前需要在项目中安装相应的依赖。
uniapp：完成商品分类页面（scroll-view），左侧导航，右侧商品
sunluyi的博客
03-19 7398
scroll-view scroll-y 允许纵向滚动 scroll-top 设置竖向滚动条位置 scroll-with-animation 在设置滚动条位置时使用动画过渡 使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height； 可以使用css 隐藏滚动条样式 /* 隐藏滚动条样式 */ ::-webkit-scrollbar { width: 0; height: 0; } 点击changeNav(index)方法使导航滚
uniapp左右联动菜单
wilL-my的博客
11-24 9451
来自uView提供的模版https://uviewui.com <template> <view class="u-wrap"> <view class="u-search-box"> <view class="u-search-inner"> <u-icon name="search" color="#909399" :size="28"></u-icon> <text class="...
uniapp使用scroll-view实现菜单的左联右和右联左
m0_68956554的博客
04-16 1063
scroll_into: '', //值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。在点击左侧菜单的时候给trigger赋值，完成右侧商品的滑动。data定义变量trigger，添加动态class，到这里基本就已经完成了右联左。计算左侧菜单分类高度。
uniapp侧边栏导航
09-16
Uniapp 是一种基于 Vue.js 框架的跨平台应用开发框架。实现侧边栏导航可以通过使用uni-ui组件库中的Sidebar组件或者自定义实现。 使用uni-ui的Sidebar组件可以很方便地实现侧边栏导航。你可以在页面中引入Sidebar组件，然后在组件的data中定义导航菜单的数据，最后在模板中使用v-for指令渲染菜单项。具体使用方式可以参考uni-ui官方文档中的Sidebar组件部分。 如果你想自定义实现侧边栏导航，可以考虑使用Vue Router来管理路由和页面的切换。你可以创建一个侧边栏组件，然后在该组件的模板中使用v-for指令动态渲染导航菜单项，并通过点击事件来切换页面。同时，你还需要在路由配置中定义每个菜单项对应的路由路径和组件。 总结一下，Uniapp中实现侧边栏导航有两种方式：使用uni-ui的Sidebar组件或自定义实现并结合Vue Router使用。具体选择哪种方式可以根据你的需求和项目情况来决定。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值