uni-app的flex盒模型与布局进阶写法（高手勿进）

最新推荐文章于 2025-02-16 13:40:49 发布
最新推荐文章于 2025-02-16 13:40:49 发布
阅读量5.8k 收藏 31
点赞数 20
分类专栏： 前端 文章标签： vue.js css html sass uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/steve95/article/details/116014510
版权
本文详细解析了uni-app中盒模型的运用技巧，如圆角框、上圆角背景，并通过实例演示了flex布局的左整右散、上整下散布局，包括帖子样式和自习室卡片设计。关键在于理解元素层级和布局方向，结合实例掌握高级写法。

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

uni-app的flex盒模型与布局进阶写法（高手勿进）

官方文档

许多细节不多赘述，细枝末节还是看官方文档
盒模型
flex布局

盒模型的进阶操作

在这里插入图片描述
盒模型其实很简单，主要是对于margin和padding以及border的使用
可以这样去理解，margin向外扩展，padding是向内缩减，border是对边框的操作，content在这里我们不去关注，content将会在下面的flex布局中去讨论。
这个部分讲几个我认为比较有用的写法：

  1. 圆角框
    在这里插入图片描述
<template>
	<view class="">
		<view class="example_one">
			这是一个圆角框
		</view>
	</view>
</template>

.example_one {
	background-color: #ffff00;
	width: 100%;
	height: 300rpx;
	padding: 25rpx 25rpx; /* 向内压缩空间,否者内容会显示在框外，大家可以试试不写这行代码，内容会怎么样 */
	border-radius: 25rpx; /* 使四个角都为圆角 */
	margin: 50rpx auto;/* 居中并使上下编剧各位25rpx */
}
  1. 上圆角背景
    在这里插入图片描述
<template>
	<view class="content">
		<view >
			这行可以是搜索栏
		</view>
		<view class="example_two">
			这是一个上圆角背景
		</view>
	</view>
</template>

.content{
	background-color: #C0C0C0;
}
.example_two{
	background-color: #FFFFFF;
	height: 300rpx;
	padding: 25rpx 25rpx; /* 向内压缩空间,否者内容会显示在框外，大家可以试试不写这行代码，内容会怎么样 */
	border-radius: 35rpx 35rpx 0 0; /* 使上面两个角为圆角 */
	margin-top: 50rpx;
}

flex布局

有些小伙伴看了uni-app的flex布局文档后，可能还是比较迷糊，不知道怎么灵活的去写样式，下面将会从易到难的去分析几个样式

  1. 左整右散
    假如现在我们想写这样一个样式
    在这里插入图片描述
  • 首先我们应该分析这个布局，对其进行标号
    在这里插入图片描述
    将其划分为左右两部分（1）（2，3，4），这两部分同级，右边三部分同级
  • 那么下面看代码
<template>
	<view class="content">
		<view class="left">
			1
		</view>
		<view class="right">
			<view class="l1">
				2
			</view>
			<view class="l2">
				3
			</view>
			<view class="l3">
				4
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.content{
		display: flex;
		flex-direction: row;
		background-color: #999999;
		padding: 30rpx 30rpx;
		justify-content: space-between;
		.left{
			background-color: #FFFFFF;
			width: 30%;
			height: 300rpx;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 60%;
			.l1{
				background-color: #FFFFFF;
				width: 100%;
				height: 90rpx;
			}
			.l2{
				background-color: #FFFFFF;
				width: 100%;
				height: 90rpx;
			}
			.l3{
				background-color: #FFFFFF;
				width: 100%;
				height: 90rpx;
			}
		}
	}
</style>

效果图：
在这里插入图片描述

  1. 上整下散
    假如现在我们想要做这样一个样式
    在这里插入图片描述
  • 那么我们将其划分为上下两块（1）（1，2，3），1和（2，3，4）是同级的，2，3，4是同级的
  • 代码和上面的大同小异，只做了部分修改，代码如下：
<template>
	<view class="content">
		<view class="left">
			1
		</view>
		<view class="right">
			<view class="l1">
				2
			</view>
			<view class="l2">
				3
			</view>
			<view class="l3">
				4
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.content{
		display: flex;
		flex-direction: column;
		background-color: #999999;
		padding: 30rpx 30rpx;
		justify-content: space-between;
		align-items: center;
		height: 300rpx;
		.left{
			background-color: #FFFFFF;
			width: 90%;
			height: 100rpx;
		}
		.right{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 90%;
			.l1{
				background-color: #FFFFFF;
				width: 25%;
				height: 150rpx;
			}
			.l2{
				background-color: #FFFFFF;
				width: 25%;
				height: 150rpx;
			}
			.l3{
				background-color: #FFFFFF;
				width: 25%;
				height: 150rpx;
			}
		}
	}
</style>

在这里插入图片描述

  1. 实战——帖子
    现在我们想做这样一个帖子的样式：
    在这里插入图片描述
    按照上面的步骤来：
  • 划分元素块
    在这里插入图片描述
    这样就一目了然了，到底哪些是一级的，哪些在下面一级，首先应该把框架用代码敲出来
<view class="tiezi">
	<view class="l1">
			<image src="" mode="aspectFit" class="headicon"></image>
			<view class="namedate">
				<text class="name"></text>
				<text class="date"></text>
			</view>
		</view>
		<view class="l2">

		</view>
		<view class="l3">
			<view v-for="(item1,index) in item.pic" :key="index">

			</view>
		</view>
		<view class="l4">
			<view class="zan">

				<view class="">

				</view>
			</view><text style="color: #a6a6a6;">|</text>
			<view class="comment">

				<view class="">

				</view>
			</view><text style="color: #a6a6a6;">|</text>
			<view class="eye">
				
				<view class="">

				</view>
			</view>
		</view>
	</view>
</view>
  • 然后再向框架里面填充元素并写样式，代码如下，其中图片的资源大家可以自行替换看效果，我就不放上去了
<view class="tiezi">
	<view class="l1">
		<image v-if="item.headicon" :src="item.headicon" mode="aspectFit" class="headicon"></image>
		<view class="namedate">
			<text class="name">{{item.name}}</text>
			<text class="date">{{item.date}}</text>
		</view>
	</view>
	<view class="l2">
		<text>{{item.cotent}}</text>
	</view>
	<view class="l3">
		<view v-for="(item1,index) in item.pic" :key="index">
			<image v-if="item1" :src="item1" mode="aspectFill" class="contentpic"></image>
		</view>
	</view>
	<view class="l4">
		<view class="zan">
			<image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktaGFuZC10aHVtYnMtdXAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTguODY0LjA0NkM3LjkwOC0uMTkzIDcuMDIuNTMgNi45NTYgMS40NjZjLS4wNzIgMS4wNTEtLjIzIDIuMDE2LS40MjggMi41OS0uMTI1LjM2LS40NzkgMS4wMTMtMS4wNCAxLjYzOS0uNTU3LjYyMy0xLjI4MiAxLjE3OC0yLjEzMSAxLjQxQzIuNjg1IDcuMjg4IDIgNy44NyAyIDguNzJ2NC4wMDFjMCAuODQ1LjY4MiAxLjQ2NCAxLjQ0OCAxLjU0NSAxLjA3LjExNCAxLjU2NC40MTUgMi4wNjguNzIzbC4wNDguMDNjLjI3Mi4xNjUuNTc4LjM0OC45Ny40ODQuMzk3LjEzNi44NjEuMjE3IDEuNDY2LjIxN2gzLjVjLjkzNyAwIDEuNTk5LS40NzcgMS45MzQtMS4wNjRhMS44NiAxLjg2IDAgMCAwIC4yNTQtLjkxMmMwLS4xNTItLjAyMy0uMzEyLS4wNzctLjQ2NC4yMDEtLjI2My4zOC0uNTc4LjQ4OC0uOTAxLjExLS4zMy4xNzItLjc2Mi4wMDQtMS4xNDkuMDY5LS4xMy4xMi0uMjY5LjE1OS0uNDAzLjA3Ny0uMjcuMTEzLS41NjguMTEzLS44NTcgMC0uMjg4LS4wMzYtLjU4NS0uMTEzLS44NTZhMi4xNDQgMi4xNDQgMCAwIDAtLjEzOC0uMzYyIDEuOSAxLjkgMCAwIDAgLjIzNC0xLjczNGMtLjIwNi0uNTkyLS42ODItMS4xLTEuMi0xLjI3Mi0uODQ3LS4yODItMS44MDMtLjI3Ni0yLjUxNi0uMjExYTkuODQgOS44NCAwIDAgMC0uNDQzLjA1IDkuMzY1IDkuMzY1IDAgMCAwLS4wNjItNC41MDlBMS4zOCAxLjM4IDAgMCAwIDkuMTI1LjExMUw4Ljg2NC4wNDZ6TTExLjUgMTQuNzIxSDhjLS41MSAwLS44NjMtLjA2OS0xLjE0LS4xNjQtLjI4MS0uMDk3LS41MDYtLjIyOC0uNzc2LS4zOTNsLS4wNC0uMDI0Yy0uNTU1LS4zMzktMS4xOTgtLjczMS0yLjQ5LS44NjgtLjMzMy0uMDM2LS41NTQtLjI5LS41NTQtLjU1VjguNzJjMC0uMjU0LjIyNi0uNTQzLjYyLS42NSAxLjA5NS0uMyAxLjk3Ny0uOTk2IDIuNjE0LTEuNzA4LjYzNS0uNzEgMS4wNjQtMS40NzUgMS4yMzgtMS45NzguMjQzLS43LjQwNy0xLjc2OC40ODItMi44NS4wMjUtLjM2Mi4zNi0uNTk0LjY2Ny0uNTE4bC4yNjIuMDY2Yy4xNi4wNC4yNTguMTQzLjI4OC4yNTVhOC4zNCA4LjM0IDAgMCAxLS4xNDUgNC43MjUuNS41IDAgMCAwIC41OTUuNjQ0bC4wMDMtLjAwMS4wMTQtLjAwMy4wNTgtLjAxNGE4LjkwOCA4LjkwOCAwIDAgMSAxLjAzNi0uMTU3Yy42NjMtLjA2IDEuNDU3LS4wNTQgMi4xMS4xNjQuMTc1LjA1OC40NS4zLjU3LjY1LjEwNy4zMDguMDg3LjY3LS4yNjYgMS4wMjJsLS4zNTMuMzUzLjM1My4zNTRjLjA0My4wNDMuMTA1LjE0MS4xNTQuMzE1LjA0OC4xNjcuMDc1LjM3LjA3NS41ODEgMCAuMjEyLS4wMjcuNDE0LS4wNzUuNTgyLS4wNS4xNzQtLjExMS4yNzItLjE1NC4zMTVsLS4zNTMuMzUzLjM1My4zNTRjLjA0Ny4wNDcuMTA5LjE3Ny4wMDUuNDg4YTIuMjI0IDIuMjI0IDAgMCAxLS41MDUuODA1bC0uMzUzLjM1My4zNTMuMzU0Yy4wMDYuMDA1LjA0MS4wNS4wNDEuMTdhLjg2Ni44NjYgMCAwIDEtLjEyMS40MTZjLS4xNjUuMjg4LS41MDMuNTYtMS4wNjYuNTZ6Ii8+PC9zdmc+"
				mode="" class="icon" @click="zan(zanicon)"></image>
			<view class="">
				{{item.zan}}
			</view>
		</view><text style="color: #a6a6a6;">|</text>
		<view class="comment">
			<image
				src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hhdC1zcXVhcmUtZG90cyIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMTQgMWExIDEgMCAwIDEgMSAxdjhhMSAxIDAgMCAxLTEgMWgtMi41YTIgMiAwIDAgMC0xLjYuOEw4IDE0LjMzMyA2LjEgMTEuOGEyIDIgMCAwIDAtMS42LS44SDJhMSAxIDAgMCAxLTEtMVYyYTEgMSAwIDAgMSAxLTFoMTJ6TTIgMGEyIDIgMCAwIDAtMiAydjhhMiAyIDAgMCAwIDIgMmgyLjVhMSAxIDAgMCAxIC44LjRsMS45IDIuNTMzYTEgMSAwIDAgMCAxLjYgMGwxLjktMi41MzNhMSAxIDAgMCAxIC44LS40SDE0YTIgMiAwIDAgMCAyLTJWMmEyIDIgMCAwIDAtMi0ySDJ6Ii8+PHBhdGggZD0iTTUgNmExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDB6bTQgMGExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDB6bTQgMGExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDB6Ii8+PC9zdmc+"
				mode="" class="icon"></image>
			<view class="">
				{{item.comment}}
			</view>
		</view><text style="color: #a6a6a6;">|</text>
		<view class="eye">
			<image
				src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZXllIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Ik0xNiA4cy0zLTUuNS04LTUuNVMwIDggMCA4czMgNS41IDggNS41UzE2IDggMTYgOHpNMS4xNzMgOGExMy4xMzMgMTMuMTMzIDAgMCAxIDEuNjYtMi4wNDNDNC4xMiA0LjY2OCA1Ljg4IDMuNSA4IDMuNWMyLjEyIDAgMy44NzkgMS4xNjggNS4xNjggMi40NTdBMTMuMTMzIDEzLjEzMyAwIDAgMSAxNC44MjggOGMtLjA1OC4wODctLjEyMi4xODMtLjE5NS4yODgtLjMzNS40OC0uODMgMS4xMi0xLjQ2NSAxLjc1NUMxMS44NzkgMTEuMzMyIDEwLjExOSAxMi41IDggMTIuNWMtMi4xMiAwLTMuODc5LTEuMTY4LTUuMTY4LTIuNDU3QTEzLjEzNCAxMy4xMzQgMCAwIDEgMS4xNzIgOHoiLz48cGF0aCBkPSJNOCA1LjVhMi41IDIuNSAwIDEgMCAwIDUgMi41IDIuNSAwIDAgMCAwLTV6TTQuNSA4YTMuNSAzLjUgMCAxIDEgNyAwIDMuNSAzLjUgMCAwIDEtNyAweiIvPjwvc3ZnPg=="
				mode="" class="icon"></image>
			<view class="">
				{{item.eye}}
			</view>
		</view>
	</view>
</view>

<style lang="scss">
	.tiezi {
	padding: 20rpx 26rpx;
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;

	.l1 {
		display: flex;
		flex-direction: row;
		gap: 15rpx;

		.headicon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			border: 1px solid #FFFFFF;
		}

		.namedate {
			display: flex;
			flex-direction: column;

			.name {
				font-size: 35rpx;
				font-weight: bold;
			}

			.date {
				font-size: 28rpx;
				color: #b0b0b0;
			}
		}
	}

	.l2 {
		margin-top: 20rpx;
	}

	.l3 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 15rpx;
		margin-top: 15rpx;

		.contentpic {
			height: 200rpx;
			width: 200rpx;
		}
	}

	.l4 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 70rpx;
		margin-top: 15rpx;
		.zan {
			gap: 10rpx;
			display: flex;
			flex-direction: row;
		}
		.comment{
			gap: 10rpx;
			display: flex;
			flex-direction: row;
		}
		.eye{
			gap: 10rpx;
			display: flex;
			flex-direction: row;
		}
	}
}
.icon {
	width: 35rpx;
	height: 35rpx;
	margin-top: 4rpx;
}
</style>
  1. 实战——进入自习室卡片样式
    在这里插入图片描述
  • 划分样式
    在这里插入图片描述
  • 上代码
<view v-for="(item,index) in cloudroom" :key="index" class="container">
	<view class="l1">
		{{item.name}}
	</view>
	<view class="l2">
		<view v-for="(item1,index) in cloudroom[index].sign" :key="index" class="sign">
			{{item1}}
		</view>
	</view>
	<view class="l3">
		<view v-for="(item2,index) in cloudroom[index].headicon" :key="index" class="headlist">
			<image v-if="item2":src="item2" mode="aspectFit" class="headicon"></image>
		</view>
		<view class="peoplenum">
			<!-- <image src="" mode="" class="numicon"></image> -->
			<text class="numtext">{{item.peoplenum}}人自习中</text>
		</view>
	</view>
</view>

<style lang="scss">
	.container{
		padding: 50rpx 50rpx;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		background-color: #FFFFFF;
		margin-bottom: 40rpx;
		margin-top: 40rpx;
		
		display: flex;
		flex-direction: column;
		.l1 {
			font-size: 40rpx;
			font-weight: bold;
		}
		.l2{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			gap: 15rpx;
			.sign{
				font-size: 26rpx;
				border: 1rpx solid #e6e6e6;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				background-color: #e6e6e6;
			}
		}
		.l3{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			.headicon{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
				margin-left: -10rpx;
			}
			.peoplenum{
				display: flex;
				flex-direction: column;
				font-size: 26rpx;
				color: #ababab;
				margin-top: 40rpx;
				margin-left: 200rpx;
			}
		}
	}
</style>

总结

以上就是盒模型与flex布局的进阶写法了，要点就是首先要划分出各个级别的元素，然后要注意的是image和view都是块级元素，是同一级别的

对您有用的话记得给个三连哟~

浅谈uniapp的flex布局
qq_36305027的博客
05-10 1万+
1 flex布局 ​ flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设置Flex布局也很简单直接css中，设置它的 display:flex。 1.1 flex-direction ​ 容器类元素排列方向，它有四个参数可以选择。row（从左至右）； row-reverse （从右至左）； column（从上到下）； column-reverse（从下到上）。 <template> <view style="dis
【uni-app系列】uni-app之nvue使用
邓邓子的博客
09-05 1万+
uni-app App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。一个 App 中可以同时使用两种页面，比如首页使用 nvue，二级页使用 vue 页面，官网 hello uni-app 示例就是如此。虽然 nvue 也可以多端编译，输出 H5 和小程序，但 nvue 的 css 写法受限，所以如果不开发 App，不需要使用 nvue。
uniapp的盒模型
m0_65715940的博客
12-01 621
flex-direction：可以设置按行排列column和按列排列row。这里主要是用到盒模型，class类可以设置属性样式,可以设置排列方式。如果一个左右排列的组件，右边组件需要换行，首行对齐，可以使用如下方式。display flex盒模型可以设置margin和padding。每个组件是一个view,必须包含一个总的view，固定写法。align-items:盒模型的内容位置center。会存在有滚动条的情况要在页面或者app.vue中设置。justify-content:设置盒模型开始位置。
UniApp 中 margin 和 padding 属性的使用详解
Smell_of_earth的博客
02-16 814
本文围绕 UniApp 中 `margin` 和 `padding` 属性展开。`margin` 控制元素间外边距，通过示例展示其在不同方向的设置及效果；`padding` 调整元素内容与边框的内边距。还介绍了二者的简写形式，合理运用它们能有效控制页面布局和间距。
uni-app学习小记--4（盒模型）
qq_52922303的博客
02-04 713
对于盒模型的理解我认为十分简单，将其看作一个盒子，那么我们所要展现的元素或者全局要体现出来的样式，可以通过一个一个小盒子来装载和构造；
uni-app简单布局登录页面实例
u013008898的博客
05-07 4603
<template> <view class="content"> <view class="avatorWrapper"> <view class="avator"> <image class="img" src="/static/logo.png" mode="widthFix"></image> </view> </view> <view class="form"&.
uniapp使用Vue的Flex布局
zlq22xjy的博客
06-03 597
uniapp使用Vue的Flex布局
【uni-app】uni-app实现聊天页面功能（小程序）——布局篇
hanachann的博客
04-11 1万+
在工作中使用uni-app参与开发一个小程序，其中要写一个简单的聊天页面，虽然功能不多（只有一个发送文字的功能），但是其中的细节比较多，也踩过很多坑，特此记录下来。要实现的页面如图所示，该篇主要讲讲如何布局（参考了很多文章之后根据页面需求进行一个整合）。
uni-app跨平台开发
o1dkdj的博客
06-15 929
Uni-app 框架提供了许多平台原生的 UI 控件和 API 的访问，但是这些控件和 API 在不同平台之间的支持和表现情况会有所不同，因此我们需要注意在编写代码时尽量避免使用不同平台独有的 API 或特性，同时要特别关注不同平台之间的差异，以便在不同平台上运行时代码能够正确地工作。Uni-app 运行在多个平台上，每个平台的特点是不同的。最后，总体来说，Uni-app 的跨平台开发提供了许多可能性和便利性，但也需要在搭建过程中注意兼容性问题，同时进行版本控制和测试，从而确保应用程序能够稳定地运行。
uni-app中添加自定义相机（微信小程序+app）
qq_29184685的博客
10-15 2275
2、使用h5plus提供的plus.video.LivePusher来实现，可以使用于vue平台，如果需要在相机上覆盖样式，比如边框之类的比较复杂，实践过后发现获取的图片宽度比相机宽度大，获取快照时间过长，大概需要2秒。2.1、这种方法可以在vue页面中使用，自定义样式需要plus.webview.create添加一个html页面来实现，在项目根目录下添加一个hybrid目录，在目录下添加html页面。1、使用live-pusher标签，但是页面需要是nvue平台【推荐使用这种】
Vue3 + Ts + Pinia + uni-app 学习笔记
qq_33365152的博客
09-13 1024
Vue3 +Ts + Pinia + uni-app 学习笔记
uni-app开发实例
03-16
开发实例，包含页，tab自定义导航栏，滑动列表，搜索页面等
uni-app适配布局参考
m0_73075579的博客
03-07 2636
1.微信小程序+使用原生导航栏。2.微信小程序+不使用导航栏。3.微信小程序+自定义导航栏。
uniapp——iphone、安卓手机全面屏、导航键的底部模块样式写法
努力、拼搏、奋进
05-17 407
uniapp——iphone、安卓手机全面屏、导航键的底部模块样式写法
写uni-app时用到的Flex布局
CosecantY的博客
10-19 2011
最近刚写完一套小安卓app项目，原生安卓实在太难写了，所以来研究研究uni-app。 uni-app是一套代码可打包为多种程序，因此要保证这一套代码能适配多平台。（据说一套代码能上线安卓app、IOSapp、微信小程序、QQ小程序等一大堆平台） 所以啊，官方也推荐写界面的时候用flex布局，能很大程度上适配多个平台。 之前写界面很少用到flex，感觉用不太明白，所以今天又回来研究了。 简单看了看官方给的模板里，就是用到了弹性布局的例子，自己也试着写了一下，感觉悟了，这不就是Android的布局文件里
UNIAPP实战项目笔记39 我的页面布局
Ggome的博客
11-17 3571
common 公共文件：全局css文件 || 全局js文件。pages.json 配置文件： 导航、 tabbar、 路由。manifest.json 配置文件： appid、logo…App.vue 全局配置：样式、全局监视。static 静态资源：图片、字体图标。main.js vue初始化入口文件。具体图片自己替换哈，随便找了个图片的做示例。components 组件。my.vue 我的页面布局。
【uni-app】Flex布局
热门推荐
明月沉江春雾晓
06-20 3万+
文章目录Flex布局的概念Flex的属性 Flex布局的概念 特点： flexible box：弹性盒状布局 容器控制内部元素的布局定位 CSS3引入的新布局模型 伸缩元素，自由填充，自适应 优势： 可在不同方向排列元素 控制元素排序的方向 控制元素的对齐方式 控制元素之间等距 控制单个元素放大与缩放比例、占比、对齐方式 flex布局的常用术语： flex container:fle...
uni-app的uni-list列表组件高效使用举例 (仿知乎日报实现)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
06-20 6778
uni-list是Uni-App框架内置的一个列表组件，它以简洁、灵活的方式封装了列表展示逻辑，支持多种列表项布局，如文本、图标、图片等组合展示。通过uni-list，开发者可以轻松创建美观、响应式的列表界面，无需从零开始编写复杂的布局代码，大大提升了开发效率。uni-app官网uni-list 列表 - DCloud 插件市场uni-list组件的强大之处在于其高度的可定制性。除了基本的文本展示，它还支持图片、图标、开关、滑动操作等多种元素的嵌入，以及不同的布局模式（如左图右文、上下结构等）。
uniapp使用SCSS混入 封装flex布局 从此一行搞定flex
weixin_46448762的博客
03-24 1260
将上面的scss文件导入到app.vue中。最后就可以直接在全局的样式中使用了。首先定义demo.scss。
uni 中nvue scroll-view 组件在iOS中无法滚动
最新发布
03-19
### 已知问题分析 在 `uni-app` 的 NVUE 模式下，`scroll-view` 组件在 iOS 平台上可能会出现无法正常滚动的情况。这通常与以下几个因素有关： 1. **iOS 原生渲染特性**：NVUE 使用的是原生渲染引擎，在某些情况下可能由于布局或样式冲突导致滚动失效[^1]。 2. **事件绑定问题**：如果没有正确处理滚动事件或者未适配特定平台的行为，也可能引发此问题[^2]。 3. **固定定位干扰**：如果页面中有 `fixed` 定位的元素，则可能导致视图行为异常，尤其是在需要实现下拉刷新等功能时[^4]。 --- ### 解决方案 #### 方法一：调整 `scroll-view` 属性配置 确保 `scroll-view` 的属性设置正确，尤其是针对 iOS 平台的关键参数： - 设置 `enable-flex="true"` 来启用弹性盒子模型，从而更好地兼容不同平台下的布局需求。 - 配置 `scroll-y="true"` 或 `scroll-x="true"` 明确指定滚动方向。 ```xml <scroll-view class="container" enable-flex="true" scroll-y="true"> <!-- 列表内容 --> </scroll-view> ``` #### 方法二：优化事件监听逻辑 通过监听滚动事件并动态更新状态，可以有效规避部分平台差异带来的影响。例如，当检测到滚动时执行必要的操作（如关闭侧滑菜单），同时确保不会阻塞默认行为。 ```javascript methods: { listScroll(e) { console.log('当前滚动位置:', e.detail.scrollTop); // 关闭所有侧滑菜单或其他交互逻辑 this.closeAllMenus(); }, closeAllMenus() { EventBus.$emit('closeSideMenus'); } } ``` #### 方法三：移除潜在干扰项 检查是否存在 `fixed` 定位的弹窗 (`popup`) 或者悬浮层 (`position: fixed`)，这些元素可能会影响父容器的滚动行为。建议将此类组件放置于独立的作用域之外，避免嵌套在同一层级结构中。 #### 方法四：隐藏滚动条提升用户体验 虽然隐藏滚动条并不会直接影响其功能性，但在实际开发过程中发现，一些设备上的滚动条显示确实会对触控反馈造成一定干扰。可以通过 CSS 自定义样式来消除这一现象[^3]: ```css .scroll-container ::-webkit-scrollbar { display: none; /* Chrome/Safari */ } /* 对应 Android 上的表现 */ .scroll-container { scrollbar-width: none; } ``` > 注意事项：上述方法仅适用于改善视觉效果，并不能单独解决核心滚动失败的问题。 #### 方法五：尝试替代方案——使用 `list-view` 对于超长列表场景，推荐改用官方提供的 `list-view` 组件代替传统 `scroll-view` 实现方式。该组件内部集成了高效的 `recycle-view` 机制，能够显著降低内存占用率的同时保持流畅度。 ```xml <list class="long-list"> <cell v-for="(item, index) in dataList" :key="index"> {{ item }} </cell> </list> ``` --- ###
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SNiFe_Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值