uniapp导航栏固定和区域滚动的问题

最新推荐文章于 2024-01-08 22:15:20 发布
最新推荐文章于 2024-01-08 22:15:20 发布
阅读量612 收藏
点赞数
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hcy5201314521/article/details/134996896
版权

效果图和源代码：

<template>
	<view class="container">
		<view class="top" style="height: 8%; margin-bottom: 20rpx; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);">
			<view class="box" style="flex: 1; background-color: #4CAF50; display: flex;"
				@click="toUrl(`/pages/menstore/shouyin`)">
				<text
					style="color: white; font-size: 14px; text-align: center; line-height: 50px; font-size: 40rpx; font-weight: 600; margin-left: 30rpx;">取消Esc</text>
			</view>
			<view class="box" style="flex: 2; background-color: #4CAF50;">
				<view class="inner-box"
					style=" margin: 20rpx 20rpx 15rpx 20rpx; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
					<text
						style="color: white; font-size: 14px; text-align: center; line-height: 50px; font-size: 50rpx; font-weight: 600; margin-right: 900rpx;">门店管理中心</text>
				</view>
			</view>
		</view>
		<view class="bottom" style="height: 92% margin-bottom: 10rpx;">
			<view class="left"
				style="width: 10%; margin-right: 10rpx; margin-left: 10rpx; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); margin-bottom: 10rpx;">
				<view style="background-color: white;">
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/index`)">
						<image src="../../../static/shouyeye.png"
							style="width: 60rpx; height: 60rpx; margin-left: -100rpx; "></image>
						<view style="font-weight: 600; margin-left: 20rpx;">首页</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/employee`)">
						<image src="../../../static/yuangongguanli.png"
							style="width: 60rpx; height: 60rpx; margin-left: -60rpx; "></image>
						<view style="font-weight: 600; margin-left: 20rpx;">员工管理</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/cashOut`)">
						<image src="../../../static/tixianzhanghu.png"
							style="width: 60rpx; height: 60rpx; margin-left: -60rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">提现账户</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/stock`)">
						<image src="../../../static/shangpinkucun.png"
							style="width: 60rpx; height: 60rpx; margin-left: -60rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">商品库存</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/deliveryUser`)">
						<image src="../../../static/配送管理.png" style="width: 60rpx; height: 60rpx; margin-left: -60rpx;">
						</image>
						<view style="font-weight: 600; margin-left: 20rpx;">配送管理</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/deliveryRecord`)">
						<image src="../../../static/tixianguan.png"
							style="width: 60rpx; height: 60rpx; margin-left: -60rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">提现管理</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;"
						@click="toUrl(`/pages/menstore/store/ordercenter`)">
						<image src="../../../static/dingdancenter.png"
							style="width: 60rpx; height: 60rpx; margin-left: -60rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">订单中心</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx; background-color: #c0f0a6;">
						<image src="../../../static/tongchengpeisongding.png"
							style="width: 60rpx; height: 60rpx; margin-left: -10rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">同城配送订单</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx; "
						@click="toUrl(`/pages/menstore/store/finance`)">
						<image src="../../../static/caiwucenter.png"
							style="width: 60rpx; height: 60rpx; margin-left: -60rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">财务中心</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;">
						<image src="../../../static/zitidindgan.png"
							style="width: 60rpx; height: 60rpx; margin-left: -10rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">自提订单处理</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;">
						<image src="../../../static/jicidingdan.png"
							style="width: 60rpx; height: 60rpx; margin-left: -10rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">计次订单处理</view>
					</view>
					<view
						style="display: flex; flex-direction: row; justify-content: center; align-items: center; border-bottom: 4px solid #f0f0f0; height: 100rpx;">
						<image src="../../../static/erweimama.png"
							style="width: 60rpx; height: 60rpx; margin-left: -40rpx;"></image>
						<view style="font-weight: 600; margin-left: 20rpx;">店铺二维码</view>
					</view>
				</view>
			</view>
			<view class="right"
				style="width: 90%; margin-left: 4rpx; margin-right: 15rpx; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; align-items: stretch; margin-bottom: 10rpx;">
				<view style="height: 15%; margin-bottom: 10rpx; border-bottom: #4CAF50 3px solid;">
					<view class="orders">
						<view class="item" @click="toUrl('/pages/menstore/store/ordersGive')">
							<view class="num"></view>
							<view class="text">系统配单</view>
						</view>
						<view class="item" @click="toUrl('/pages/menstore/store/ordersQuick')">
							<view class="num"></view>
							<view class="text">快捷买单</view>
						</view>
						<view class="item" @click="toUrl('/pages/menstore/store/ordersActivity')">
							<view class="num"></view>
							<view class="text">店内活动</view>
						</view>
						<view class="item" @click="toUrl('/pages/menstore/store/ordersSelf')">
							<view class="num" style="background-color: #c0f0a6; "></view>
							<view class="text">到店自提</view>
						</view>
					</view>
				</view>
				<view style="height: 85%; margin-bottom: 10rpx; ">
					<!--到店自提-->
					<view class="store-manager-class">
						<view class="navs">
							<view class="navs-item" :class="activeNav==item.value?'active':''"
								v-for="(item,idx) in navs" :key='idx' @click="onNavClick(item.value)">{{item.name}}
							</view>
						</view>
						<view style="height: 1000rpx; overflow: auto;">
							<view class="item" v-for="(item,idx) in listData" :key="idx">
								<view class="left">到店自提</view>
								<view class="right">
									<view>订单编号：{{item.itemNumber}}</view>
									<view>下单时间：{{item.insertTime}}</view>
									<view><span class="r">商品名称：{{item.title}} </span></view>
									<view>下单人：{{item.userName}}</view>
									<view><span class="r">单价：{{item.unitPrice}} </span> <span class="r">
											数量：{{item.number}}</span><span>
											消费金额：{{item.totalPrices}}</span></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navs: [{
						name: '待自提',
						value: '201'
					},
					{
						name: '已完成',
						value: '202'
					},
					{
						name: '已评价',
						value: '203'
					}
				],
				activeNav: "201",
				listData: [{
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, ],
				reload: false, //是否下拉重新加载
				status: 'more',
				size: 10,
				current: 1,
				total: 0,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
				},
				filter: '',

			};
		},
		onLoad(option) {
			if (option.activeNav) this.activeNav = option.activeNav;
			if (option.filter) this.filter = option.filter;
			this.reload = true;
			this.getList();
		},
		onShow() {

		},
		onPullDownRefresh() {
			this.reload = true;
			this.getList();
		},
		onReachBottom() {
			this.status = this.listData.length >= this.total ? '' : 'more';
			// this.status = 'more';
			this.getList();
		},
		methods: {
			getList() {
				uni.stopPullDownRefresh();
				if (this.listData.length != 0 && this.listData.length == this.total) return;
				if (this.listData.length < this.total) {
					this.current = this.reload ? 1 : this.current + 1;
				}
				let query = `?current=${this.current}&size=${this.size}&state=${this.activeNav}`;
				this.ajax.get(this.jk.mdSelfOrders + query).then(res => {
					this.total = res.data.total;
					let list = res.data.records;
					this.listData = this.reload ? list : this.listData.concat(list);
					if (list.length < this.size) this.status = '';
					this.reload = false;
				})
			},
			toUrl(url) {
				this.common.UnavigateTo(url)
			},
			onNavClick(value) {
				this.activeNav = value;
				this.reload = true;
				this.listData = [];
				this.getList();
			}
		}
	}
</script>

<style lang="less">
	// 刚开始基本样式
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 设置容器高度占满整个视窗 */
		background-color: #f0f0f0;
	}

	.top {
		width: 100%;
		background-color: #4CAF50;
		/* 顶部区域的背景颜色，可根据需求修改 */
		display: flex;
		/* 使用flex布局 */
		justify-content: space-between;
		/* 平均分布子元素 */
	}

	.box {
		height: 100%;
		/* 子盒子高度与父盒子相同 */
		display: flex;
		/* 使用flex布局 */
		align-items: center;
		/* 垂直居中子元素 */
	}

	/* 内部盒子样式 */
	.inner-box {
		background-color: #4CAF50;
		margin: 10rpx;
		display: flex;
		justify-content: space-around;
	}

	.bottom {
		display: flex;
		flex-direction: row;
		flex: 1;
	}

	.left {
		width: 30%;
		background-color: #fafafa;
	}

	.right {
		width: 70%;
		background-color: #fdfdfd;
	}

	// 小圆圈样式
	.orders {
		display: flex;
		justify-content: space-around;
		margin-top: 10rpx;
		margin-left: -200rpx;

		.item {

			text-align: center;

			.num {
				width: 130rpx;
				height: 130rpx;
				line-height: 100rpx;
				border: 2px solid #4CAF50;
				border-radius: 100%;
				text-align: center;
			}

			.text {
				margin: 10rpx 0 30rpx 0;
			}
		}
	}




	//自提样式
	.store-manager-class {
		background-color: #FFFFFF;
		// height: 100vh;

		//导航
		.navs {
			display: flex;
			justify-content: space-around;
			background-color: #FFFFFF;
			// position: fixed;
			margin-top: -10rpx;
			width: 86%;
			z-index: 1000;

			.navs-item {
				padding: 20rpx 0;
			}

			.active {
				color: #0E7519;
				border-bottom: 1px solid #0E7519;
				padding-bottom: 20rpx;
			}
		}

		.item {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #CCCCCC;

			.left {
				border: 1px solid #CCCCCC;
				text-align: center;
				margin-right: 20rpx;
				font-weight: bold;
				width: 80rpx;
				padding: 20rpx 20rpx;
			}

			.right {
				uni-view {
					font-size: 24rpx;
					color: #101010;
					margin-bottom: 10rpx;

					.r {
						margin-right: 40rpx;
					}
				}
			}
		}
	}
</style>

局部的一些效果和代码：

	<view style="height: 85%; margin-bottom: 10rpx; ">
					<!--到店自提-->
					<view class="store-manager-class">
						<view class="navs">
							<view class="navs-item" :class="activeNav==item.value?'active':''"
								v-for="(item,idx) in navs" :key='idx' @click="onNavClick(item.value)">{{item.name}}
							</view>
						</view>
						<view style="height: 1000rpx; overflow: auto;">
							<view class="item" v-for="(item,idx) in listData" :key="idx">
								<view class="left">到店自提</view>
								<view class="right">
									<view>订单编号：{{item.itemNumber}}</view>
									<view>下单时间：{{item.insertTime}}</view>
									<view><span class="r">商品名称：{{item.title}} </span></view>
									<view>下单人：{{item.userName}}</view>
									<view><span class="r">单价：{{item.unitPrice}} </span> <span class="r">
											数量：{{item.number}}</span><span>
											消费金额：{{item.totalPrices}}</span></view>
								</view>
							</view>
						</view>
					</view>
				</view>
<script>
	export default {
		data() {
			return {
				navs: [{
						name: '待自提',
						value: '201'
					},
					{
						name: '已完成',
						value: '202'
					},
					{
						name: '已评价',
						value: '203'
					}
				],
				activeNav: "201",
				listData: [{
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, {
					itemNumber: 'AAAAAAAAAAAAAA',
					insertTime: '1'
				}, ],
				reload: false, //是否下拉重新加载
				status: 'more',
				size: 10,
				current: 1,
				total: 0,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
				},
				filter: '',

			};
		},
		onLoad(option) {
			if (option.activeNav) this.activeNav = option.activeNav;
			if (option.filter) this.filter = option.filter;
			this.reload = true;
			this.getList();
		},
		onShow() {

		},
		onPullDownRefresh() {
			this.reload = true;
			this.getList();
		},
		onReachBottom() {
			this.status = this.listData.length >= this.total ? '' : 'more';
			// this.status = 'more';
			this.getList();
		},
		methods: {
			getList() {
				uni.stopPullDownRefresh();
				if (this.listData.length != 0 && this.listData.length == this.total) return;
				if (this.listData.length < this.total) {
					this.current = this.reload ? 1 : this.current + 1;
				}
				let query = `?current=${this.current}&size=${this.size}&state=${this.activeNav}`;
				this.ajax.get(this.jk.mdSelfOrders + query).then(res => {
					this.total = res.data.total;
					let list = res.data.records;
					this.listData = this.reload ? list : this.listData.concat(list);
					if (list.length < this.size) this.status = '';
					this.reload = false;
				})
			},
			toUrl(url) {
				this.common.UnavigateTo(url)
			},
			onNavClick(value) {
				this.activeNav = value;
				this.reload = true;
				this.listData = [];
				this.getList();
			}
		}
	}
</script>
<style lang="less">
//自提样式
	.store-manager-class {
		background-color: #FFFFFF;
		// height: 100vh;

		//导航
		.navs {
			display: flex;
			justify-content: space-around;
			background-color: #FFFFFF;
			// position: fixed;
			margin-top: -10rpx;
			width: 86%;
			z-index: 1000;

			.navs-item {
				padding: 20rpx 0;
			}

			.active {
				color: #0E7519;
				border-bottom: 1px solid #0E7519;
				padding-bottom: 20rpx;
			}
		}

		.item {
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #CCCCCC;

			.left {
				border: 1px solid #CCCCCC;
				text-align: center;
				margin-right: 20rpx;
				font-weight: bold;
				width: 80rpx;
				padding: 20rpx 20rpx;
			}

			.right {
				uni-view {
					font-size: 24rpx;
					color: #101010;
					margin-bottom: 10rpx;

					.r {
						margin-right: 40rpx;
					}
				}
			}
		}
	}
</style>

这里涉及到的知识点：区域设置高度 并且允许滚动 。设置高度啊 你想在区域多少高度内显示就设置多少高度 然后设置一个允许滚动属性。定位 。 overflow: hidden是隐藏溢出。禁止滚动还有好几种实现的方式：js  定位 css touch-action: none

Ya0Chen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【uniapp小程序】配置tabbar底部导航栏_uniapp底部导航栏
2301_82243558的博客
04-17 1928
配置底部导航栏首先需要大家准备好自己想要使用的图标，每个tab可以选择两个图标，分别为选中前的和选中后的。之后我们根据uniapp官网提供的uniapp官网tabbar配置项，话不多说直接上正文一起来学习一下如何配置底部导航栏吧。
uniapp 自定义导航栏
08-18
uniapp 自定义导航栏
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
12-13
最近一直在学习uni-app开发，由于uniapp是基于vue.js技术开发的，只要你熟悉vue，基本上很快就能上手了。 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明：app-plus配置，需注意 目前暂支持H5、App端，不支持小程序。 在page.json里配置app-plus即可 { "path": "pages/ucenter/index", "style": { "navigationBarTitleT
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <template> <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
uniapp实现可以左右滑动导航栏
01-18
本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码，供大家参考，具体内容如下 <vi
JS滚动到指定位置导航栏固定顶部
10-19
最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享
uni-app顶部导航条固定
最新发布
小夏同学呀
01-08 1084
2.给父容器page设置高度为100%，完全撑开，开启并flex弹性盒，给滚动容器设值flex值为1。滚动容器，包裹需要滚动的区域。
小程序 页面移动到指定位置将导航栏固定(uniapp)
JunVei的博客
09-23 3105
页面移动到指定位置，将导航栏固定
iframe 滚动条不显示_uniapp禁止页面滚动条出现
weixin_39641173的博客
11-19 371
当页面的高度超出显示高度时，滚动页面会出现滚动条app端可以设置关闭，操作方法如下：属性："scrollIndicator": "none""pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBar...
导航栏滚动到顶部后固定
07-16
导航栏滚动到页面顶部后，固定，并处于所有的页面元素上方，浮动显示。
uniapp实现楼层导航 ，滚动定位，锚点导航
pipizhou16的博客
12-19 3115
uniapp实现楼层导航 ，滚动定位，锚点导航
导航滚动到一定高底后吸顶，锚点定位自动跟随
09-28
导航滚动到一定高底后吸顶，锚点定位自动跟随 //内容信息导航吸顶 $(document).ready(function(){ var navHeight= $("#navHeight").offset().top; var navFix=$("#nav-wrap"); $(window).scroll(function(){ if($(this).scrollTop()>navHeight){ navFix.addClass("navFix"); } else{ navFix.removeC
uniapp tab切换 吸顶问题 onPageScroll（监听页面滚动距离）
weixin_55648290的博客
12-03 2011
uniapp tab切换 吸顶问题 onPageScroll（监听页面滚动距离）
uniapp 如何自定义导航栏并自适应机型
weixin_47970498的博客
09-01 1679
本文介绍了如何在 Uniapp 中自定义导航栏并自适应不同机型的屏幕大小。使用 `nav-bar` 组件可以方便地自定义导航栏。
uni-app 导航栏滚动后固定到顶部效果demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
10-12 1161
uni-app 导航栏滚动后固定到顶部
uniapp中滚动到一定高度时菜单导航吸顶（导航栏滚动到顶部后固定）
babyxuqian的博客
11-12 4056
onPageScroll（监听滚动、滚动监听、滚动事件）参数说明： 属性 类型 说明 scrollTop Number 页面在垂直方向已滚动的距离（单位px） 代码块部分 <template> <view class="main"> <view class="hand" ref='handHeight'> <!-- 内容块 --> </view> <view class="nav"..
uniapp控制滚动条固定滚动状态栏保持不动
weixin_73332666的博客
02-11 956
uniapp控制滚动条
uni-app 实现手机端滑动导航栏
huangdj321的博客
02-26 2647
创建项目 此步骤省略，不会的同学可以参看我的另外一篇文章： 创建项目 这里以一个微博首页为例，最终实现的页面效果图如下： 样式准备 1、在 pages/index/index.vue 文件中，添加如下代码： <template> <view class="content"> <scroll-view scroll-x> <view class="scroll"> <vie
uniapp左侧导航栏固定
11-22
根据提供的资料，Uniapp是一个跨平台的应用程序开发框架，可以使用Vue.js开发应用程序。如果您想在Uniapp中创建一个固定的左侧导航栏，可以使用uni-sidebar组件。该组件可以在左侧显示一个固定的侧边栏，您可以在其中添加菜单项和链接。 以下是一个简单的示例代码，演示如何在Uniapp中创建一个固定的左侧导航栏： ```html <template> <view class="container"> <uni-sidebar :show="true" :width="200"> <view slot="left"> <view class="menu-item">菜单项1</view> <view class="menu-item">菜单项2</view> <view class="menu-item">菜单项3</view> </view> </uni-sidebar> <view class="main-content"> <!-- 主要内容区域 --> </view> </view> </template> <script> export default { data() { return {}; }, }; </script> <style> .container { display: flex; flex-direction: row; height: 100vh; } .menu-item { padding: 10px; cursor: pointer; } .main-content { flex: 1; background-color: #f5f5f5; } </style> ``` 在上面的代码中，我们使用了uni-sidebar组件来创建一个固定的左侧导航栏。我们将菜单项添加到左侧的插槽中，并将主要内容区域添加到右侧。我们还使用了flexbox布局来确保左侧导航栏和主要内容区域都占据整个屏幕高度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值