uniapp问题杂记

CV工程师!!2024-01-25 11:40

一,以后就会陆续在这篇文章中记录常见和困难的问题

[2.uniapp 解决width="100%"下padding无效问题](#2.uniapp 解决width=“100%“下padding无效问题)

1.uniapp怎么设置百分百高

前言,今天实习生问我怎么设置百分百高,为什么他的页面设置百分百了还是有滚动条,在这纪录一下希望帮到新入门同样有疑惑的小伙伴

在App.vue中定义样式

	uni-page-body {
		height: 100%;
	}

然后在你布局的页面最外层盒子直接设置百分百高就好了

<template>
	<scroll-view class="content-box" scroll-x="true" refresher-enabled="true" :refresher-triggered="refresh"
		@refresherrefresh="onRefresh">

</scroll-view>
</template>




//style
.content-box{
    height:100%
}

2.uniapp 解决width="100%"下padding无效问题

原因：我们给内容设置了width为100%，却在默认情况下它是标准盒模型，所以width只是指content的值，此时我们在给他加padding或者设置border宽度的时候，其实盒子的宽度就大于100%了。

解决方法：给加了padding或border的盒子加

box-sizing: border-box;