uniapp做导航栏（基于上次的demo做了升级）

~那一刻~

于 2020-07-24 11:03:41 发布

阅读量377

点赞数

分类专栏：技术文章标签： flex

本文链接：https://blog.youkuaiyun.com/weixin_45045593/article/details/107555890

版权

本文介绍了如何使用uniapp的flex布局来创建导航栏和内容区域，强调了利用flex布局的自适应特性和避免使用定位、浮动的重要性。通过实例展示了导航栏（nav）、content和detail部分的flex布局应用，其中detail区域因小程序兼容性问题设置了固定宽度。

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

1.先看效果图
在这里插入图片描述
2.头部nav是用flex布局的，所以可以增加内容，布局都是自适应的
3.content是flex布局的
4.detail是flex布局的，我把主轴方向改成次轴方向，内容也是可以随意增加或者删减
5.detail的宽度我给力一个固定的，因为小程序不兼容flex:1

提示：uniapp做布局，最好用flex布局，尽量不要去用定位，浮动

<template>
	<view class="myNav_collection">
		<view class="nav">
			<text class="nav_item" :class="{'active':isActive==1}" @click="chenked(1)">商品收藏</text>
			<text class="nav_item" :class="{'active':isActive==2}" @click="chenked(2)">资讯收藏</text>
			<text class="nav_item" :class="{'active':isActive==3}" @click="

最低0.47元/天解锁文章