uni-app页面怎么设计更美观

顶部

页面最顶部要获取到手机设备状态栏的高度,避免与状态栏重叠或者被状态栏挡住

// 这是最顶部的父级容器
<view :style="{ paddingTop: `${statusBarHeight + extraPadding}px` }">....
</view>
export default {data() {return {statusBarHeight: 0,extraPadding: 20}},onReady() {uni.getSystemInfo({success: res => {this.statusBarHeight = res.statusBarHeight;}})}
}

使用uni-app自带的uni.getSystemInfo方法获取设备的状态栏高度,除去设备的状态栏高度再额外加上一点高度,这样就避免页面最顶部的内容会被状态栏盖住或者与状态栏重叠.
在这里插入图片描述

页面整体高度

当页面出现可滑动区域的时候使用动态计算高度值

// 使用 <scroll-view />
<view><scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }">...</scroll-view>
</view>
export default {data() {return {scrollHeight: 0,navBarHeight: 0}},mounted() {const query = uni.createSelectorQuery().in(this);query.select('.ngb').boundingClientRect(data => {if(data) {this.navBarHeight = data.height}}).exec()},onReady() {uni.getSystemInfo({success: res => {this.scrollHeight= res.windowHeight - this.navBarHeight ;}})}
}

获取导航栏的高度,括号里面填的就是你导航栏的CSS名称
res.windowHeight 是这个设备除去底下的ToBar栏的高度 当你有导航栏的时候你要减去导航栏的高度才是你剩下的页面实际高度 只有当你超出scroll-view的高度的时候才会触发滚动,这个样子就可以做到这个页面在每个设备下都可以适配
如果想要隐藏滚动条

<style>/* 取消滚动条 *//deep/ ::-webkit-scrollbar {display: block;width: 0px !important;height: 0px !important;}
</style>

圆角效果

border-radius: 10px; // 大小增加 圆角效果越明显

在这里插入图片描述
如果是给图片增加圆角效果但是不生效

overflow: hidden
border-radius: 10px;

在这里插入图片描述
在这里插入图片描述

层叠关系

像一些我的页面或者登录页面会遇到这个情况
在这里插入图片描述

// 图片的容器
<view class="background-box"><image class="background-image" src="/static/mine-photo/background1.png" mode="widthFix" />
</view>
// 头像与我的资产的容器
<view class="content" :style="{ paddingTop: `${statusBarHeight + extraPadding}px` }"><view class="box-c"><view class="box1"><text>我的</text></view><view class="box2"><view class="box2-1"><image class="box2-image" src="/static/mine-photo/user-not-login.png" mode="widthFix" /></view><view class="box2-2"><text>立即登录</text></view></view><view class="box3-c"><view class="box3-1"><view class="box3-1--1"><text>我的资产</text></view><view class="box3-1--2"><view class="box3-1--box" v-for="(item, index) in zcList" :key="index"><text class="box3-1--box-text1">{{item.text1}}</text><text class="box3-1--box-text2">{{item.text2}}</text></view></view></view></view>
</view>
.background-box {position: relative;width: 100%;
}.content {position: absolute;top: 0;left: 0;width: 100%;display: flex;justify-content: center;
}

内边距

一些卡片或者展示数据的一些容器记得给一点内边距不要让数据贴着容器

padding: 10px 20px 10px 10px;

关系为 上 右 下 左(margin bord-redius 都是同理)

对齐

在这里插入图片描述

width: 90%;
margin: 0 auto;

不要将宽度设为100% 两边要留一点 会更美观一点 使用 0 auto 方法来让元素居中显示
或者给 padding: 一个值也可以

padding: 20rpx;

或者使用flex布局, 这个要在元素外面的父容器设置

display: flex;
width: 100%;
justify-content: center;

使用这个方法让元素横向居中显示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/73656.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

江西核威环保科技:打造世界前沿的固液分离设备高新企业

随着市场经济的不断发展&#xff0c;消费者的需求越来越大&#xff0c;为了更好的服务广大新老客户&#xff0c;作为知名品牌的“江西核威环保科技有限公司&#xff08;以下简称江西核威环保科技&#xff09;”&#xff0c;将坚持以“服务为企业宗旨&#xff0c;全力打造世界前…

Ethernet(以太网)详解

一、Ethernet的定义与核心特性 以太网&#xff08;Ethernet&#xff09;是一种 基于IEEE 802.3标准的局域网&#xff08;LAN&#xff09;技术&#xff0c;用于设备间通过有线或光纤介质进行数据通信。其核心特性包括&#xff1a; 标准化&#xff1a;遵循IEEE 802.3系列协议&am…

JBDev - Theos下一代越狱开发工具

JBDev - Theos下一代越狱开发工具 自越狱诞生以来&#xff0c;Theos一直是越狱开发的主流工具&#xff0c;大多数开发者使用Theos编译代码&#xff0c;再用lldb手动调试。JBDev简化了这个过程&#xff0c;项目地址https://github.com/lich4/JBDev 简介 JBDev用于Xcode越狱开…

黑苹果及OpenCore Legacy Patcher

黑苹果及OpenCore Legacy Patcher OpenCoreUnable to resolve dependencies, error code 71 OpenCore Unable to resolve dependencies, error code 71 黑苹果升级后打补丁不成功&#xff0c;比如提示以下错误&#xff0c;可参考官方文档进行修复。 Open TerminalType sudo …

el-table + el-pagination 前端实现分页操作

el-table el-pagination 前端实现分页操作 后端返回全部列表数据&#xff0c;前端进行分页操作 html代码 <div><el-table :data"tableData" border><el-table-column label"序号" type"index" width"50" /><el…

PTA 1097-矩阵行平移

给定一个&#x1d45b;&#x1d45b;nn的整数矩阵。对任一给定的正整数&#x1d458;<&#x1d45b;k<n&#xff0c;我们将矩阵的奇数行的元素整体向右依次平移1、……、&#x1d458;、1、……、&#x1d458;、……1、……、k、1、……、k、……个位置&#xff0c;平移…

C++蓝桥杯实训篇(一)

片头 嗨~小伙伴们&#xff0c;大家好&#xff01;现在我们来到实训篇啦~本篇章涉及算法知识&#xff0c;比基础篇稍微难一点&#xff0c;我会尽量把习题讲的通俗易懂。准备好了吗&#xff1f;咱们开始咯&#xff01; 第1题 递归实现指数型枚举 我们先画个图~ 从图中&#xff…

#C8# UVM中的factory机制 #S8.5# 对factory机制的重载进一步思考

前面的重载,我们已经谈了很多,为什么还需要进一步聊聊呢。作为码农,我们喜欢拿来多种相近语言,进行对比理解,相信这是一种加深对问题理解的方式。 一 C++ 重载 在 C++ 中,重载 和 多态 的英文术语分别是:重载 → Overloading ;多态 → Polymorphism 重载的定义:在…

CentOS(最小化)安装之后,快速搭建Docker环境

本文以VMware虚拟机中安装最小化centos完成后开始。 1. 检查网络 打开网卡/启用网卡 执行命令ip a查看当前的网络连接是否正常&#xff1a; 如果得到的结果和我一样&#xff0c;有ens网卡但是没有ip地址&#xff0c;说明网卡未打开 手动启用&#xff1a; nmcli device sta…

力扣刷题第一遍

https://leetcode.cn/problemset/algorithms/ 栈 有效的括号 接雨水&#xff08;单调递减栈&#xff09; 柱状图中最大的矩形&#xff08;单调递减栈&#xff09; 逆波兰表达式求值 基本计算器 最小栈 每日温度&#xff08;单调递减栈&#xff09; 用栈实现队列 验证栈…

蓝桥杯经典题解:班级活动分组问题的深度解析与优化实现

目录 一、问题背景与描述 二、问题分析与核心思路 2.1 问题本质&#xff1a;统计与配对优化 2.2 关键观察 2.3 数学建模 三、算法设计与实现步骤 3.1 算法步骤 3.2 代码实现&#xff08;Python&#xff09; 3.3 优化点分析 四、关键细节与常见误区 4.1 细节处理 4.…

软考《信息系统运行管理员》- 5.3 信息系统数据资源备份

文章目录 数据资源备份类型按数据备份模式分按备份过程中是否可接收用户响应和数据更新分按数据备份策略分按备份的实现方式分按数据备份的存储方式分 常用备份相关技术磁盘阵列技术双机热备 某公司数据备份管理制度实例 数据资源备份类型 数据备份系统由硬件和软件两部分组成…

【蓝桥杯】3月27日笔记

1.暴力枚举 给定一个正整数n&#xff0c;请找出所有满足a b n的整数对(a, b)&#xff0c;其中a和b都是正整数&#xff0c;且a ≤ b。 输入格式&#xff1a;一个正整数n (1 ≤ n ≤ 10⁶) 输出格式&#xff1a;所有符合条件的(a, b)对&#xff0c;每行一对&#xff0c;按a的…

H3CNE综合小实验之电视机

H3CNE综合小实验之电视机 一、实验拓扑图 二、实验要求 按照图示配置IP地址&#xff1b;按照图示区域划分配置对应的动态路由协议&#xff1b;在R7上配置dhcp服务器&#xff0c;能够让pc可以获取IP地址&#xff1b;将所有环回⼝宣告进ospf中&#xff0c;将环回⼝7宣告进rip中…

Axios企业级封装实战:从拦截器到安全策略!!!

&#x1f680; Axios企业级封装实战&#xff1a;从拦截器到安全策略 &#x1f527; 核心代码解析 // 创建Axios实例 const service axios.create({baseURL: api, // &#x1f310; 全局API前缀timeout: 0, // ⏳ 永不超时&#xff08;慎用&#xff01;&#xff09;withCrede…

Kafka 的延迟队列、死信队列和重试队列

总结一下实现的方法&#xff1a; 1、延迟队列&#xff0c;首先kafka是没有延迟队列的&#xff0c;那要实现延迟队列的话&#xff0c;就得使用其他方法。在发送消息的时候加上时间戳&#xff0c;再在时间戳上面加上延迟时间。消费的时候判断一下&#xff0c;有没有到达延迟时间&…

DCAT模型:双交叉注意力革新医学影像诊断,AUC 99.75%

一、研究背景&#xff1a;医学影像诊断的挑战 在医学影像领域&#xff08;如X光、OCT&#xff09;&#xff0c;精准分类疾病直接影响患者治疗决策。传统深度学习模型存在两大痛点&#xff1a; 1.过度自信&#xff1a;即使图像模糊或存在噪声&#xff0c;模型仍可能给出高…

2.2.2 Spark单机版环境

本文介绍了如何搭建和使用Spark单机版环境。首先&#xff0c;确保安装配置好JDK&#xff0c;然后从群共享下载Spark安装包并上传至云主机的/opt目录。接着&#xff0c;解压到/usr/local目录并配置环境变量&#xff0c;通过spark-submit --version验证安装成功。在使用Spark单机…

AI音乐的革命:迈向格莱美级别的艺术表现力

摘要 近期&#xff0c;AI技术在音乐领域的突破性进展令人瞩目。这项新技术赋予了AI格莱美级别的歌唱能力&#xff0c;使其不仅能够进行写作和绘画创作&#xff0c;还能以接近人类的艺术表现力演绎音乐作品。这一成就标志着AI在艺术领域的技术进步达到了新的高度&#xff0c;为…

SAP消息号类型(E/I/W)的定制

比如这样的M8088的标准的消息号&#xff0c;希望变更消息类型&#xff0c;查询之后&#xff0c;网上提供的消息&#xff0c;都是SE91,OMRM&#xff0c;OBA5之类的消息。事实上&#xff0c;SE91是不能变更消息类型的。 而在OMRM界面&#xff0c;只看到有限的几个消息号。 原来&a…