uniapp问题杂记

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

目录

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

1.uniapp怎么设置百分百高

[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;
相关推荐
詩句☾⋆᭄南笙2 分钟前
HTML的盒子模型
前端·html·盒子模型
落言4 分钟前
AI 时代的工程师:懂,却非懂的时代
前端·程序员·架构
一枚攻城狮6 分钟前
前端知识点大汇总
前端
Mike_jia1 小时前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端
Southern Wind2 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao2 小时前
Rspack 原理:webpack,我为什么不要你
前端
yinuo2 小时前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽2 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户98402276679182 小时前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔2 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js