空数据页面居中小记

最新推荐文章于 2024-07-05 19:42:17 发布
最新推荐文章于 2024-07-05 19:42:17 发布
阅读量305 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ac1113479/article/details/105231571
版权
本文记录了在老项目组件改造中，如何将空数据或错误页面居中显示的实现过程。通过废弃原有手动设置高度的方法，改为使用CSS的fixed定位结合transform平移实现页面居中。对于局部区域居中，则利用absolute定位和相对父元素设置居中。
摘要由CSDN通过智能技术生成

今天遇到一个老项目组件的改造，下面简称noData组件，基本样式就是基于接口如果返回空数据或者出现报错的情况，页面（有可能是popup弹窗）正中间需要展示图片 + 文案 + 按钮的样式。
话不多说，直接上ui图：

最终展示图

在这里插入图片描述
实现方案很多，我先描述一下这个老组件原来的逻辑：

<view class="noData" style="height: {
      {
      height}}px">
	<view class=
最低0.47元/天 解锁文章
pp胜
关注
Android 显示空页面工具类
IT_默
05-06 2860
做项目肯定会遇到这样的需求，数据加载为空或者数据加载异常时候显示一个空页面给用户： 这篇blog就来实现这样一个简单的封装1.首先定义一个线性布局 2.然后通过一个工具类来管理这样一个View先来看自定义的线性布局public class EmptyLayout extends LinearLayout{ /** * 空页面图片 */ private Image
ios-优秀的UITableView空数据页面显示.zip
07-11
针对UITableView，利用外国友人写的一个优秀的空数据页面显示写的一个分类，方便猿友代码的整理
对空数据页面等公共页面实现的一些思考
weixin_33951761的博客
06-07 177
在实际的项目开发中为了增加用户体验，设计的同学会设计空数据界面，错误提示页，网络加载页等等。通常情况下我们的处理方式是针对每个页面写好一个布局文件，然后在需要的页面通过include标签加载进来，最后在需要显示的地方控制其隐藏和显示，这种写法完全没有问题，只不过需要手动修改各个界面的布局文件，嵌套这些布局。网上也有很多的小伙伴针对这个问题进行过控件的封装，但最终也避免不了修改xml代码，那么有没有...
android 空数据页面,Android空数据页面提示控件
weixin_33548183的博客
05-28 435
前言通常，当我们的应用页面没有数据可以显示时，我们需要给予用户一些界面提示，以避免空空如也的页面带来较差的用户体验。一般这样的页面都为ListView， ListView 很贴心的提供了setEmptyView(View emptyView)；方法来保证用户体验，但是如果你有2年以上的开发经验，你肯定知道，系统的原生控件是永远都满足不了需求的。 setEmptyView 的Bug之一：一般来说现在...
#vue# 纯手写“页面数据为空时，显示空状态图片”
ZHENGCHUNJUN的博客
07-20 3501
需求：在我们的页面，没有显示任何数据时，显示图片以及提示语 效果： 后端接口数据 思路： （1）只需要在页面里面加入一个div，当页面里面的数据为0时，就用v-show展示出来（就是当页面没有数据的时候，就显示这个图片） （注意，这个空状态的div需要放在具体呈现的位置进行排版） //（2）设置一个变量，例如totalNum ，在js的data板块先把变量totalNum设置为0，就是先不展示出来 （3）最后一步，就是让我们的变量totalNum 全等于 0（就是没有数据...
Android 自定义空数据提示界面 EmptyView
hotapk_cn的专栏
09-26 1119
关于FastandrutilsFastandrutils 是一套整理修改整合的android开发常用的工具类，常用的自定义view控件等。 这样可以减少复制粘贴代码，从而减少重复代码，也不用为了一个常用的功能去谷歌百度，让代码更简洁，让开发更高效。 同时希望您的添加完善，让android开发变得更简单。github地址,感兴趣的话，不妨点赞支持下 个人博客打完广告，进入正题 在开发过程中，
垂直居中 小记
03-27
在网页设计中，"垂直居中"是一个常见的需求，它涉及到CSS布局的多个方面。这篇小记主要探讨了如何在不同场景下实现元素的垂直居中。博客链接为，虽然没有提供具体内容，但我们可以根据常规的垂直居中方法进行讨论。 ...
bootstrap table合并行数据并居中对齐效果
10-17
在实际的网页设计中，有时我们需要合并行数据以展示更清晰、更有组织的信息，同时保持内容居中对齐，使得视觉效果更加统一和专业。下面将详细介绍如何在 Bootstrap Table 中实现这一效果。 1. **合并行数据**： 在...
网页制作 css让页面居中对齐
09-25
网页制作 css让页面居中对齐 css让页面居中对齐是网页制作中的一项基本需求，今天我们将总结一下css让页面居中对齐的方法。 一、使用margin实现居中对齐 这是我们大家用的最多的方法，使用的时候必须为容器制定...
前端基础学习-自定义表格数据为空时的样式
小夭的博客
01-06 677
在使用element-ui时，如果表格数据为空，往往默认是暂无数据样式，部分需求需要再表格无数据时展示特定样式。 话不多说上效果 代码部分 主要是用插槽插入需要的页面样式 <template slot="empty"> <img width="200" height="200" src="@/assets/images/nullTable.png" alt=""> <div class="table_emptytxt"
eltable 无数据文案修改_文案没有创意和深度，教你写出高质量的优秀文案！
weixin_31063029的博客
12-08 283
新媒体运营的工作者越来越多，大家是不是也在为文案而烦恼？是不是写出了文案没有创意和深度？在这里，想给大家提一点关于写标题的事情：一个好的标题非常重要，往往直接决定了用户有没有继续看下去或者点开看下去的欲望。在网上有很多关于写标题的方法值得大家借鉴，但在这里，我想给大家说一个比较笨的方法：写文案要学会仿写就是你可以每天去微博、头条以及其他你想投放的一些平台和网站上去寻找能够吸引你的标题，保存之后然后...
【uni-app】1、分页组件z-paging介绍与使用
热门推荐
Asurplus
07-19 5万+
一个uni-app (opens new window)分页组件，全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等
z-paging 的使用 uniapp+vue3脚手架
hjh15827475896的博客
04-03 2095
说明， z-paging 默认是占满整个页面的，它会挡住页面的其它元素， 所以， 我们要把所有的元素写在 z-paging 的组件里。uniapp 中没有合适的分页插件， 所以找到了 z-paging的分页插件使用，这里记录一下用法。上面的例子中使用的是 HbuilderX 来引入的， 本人使用的是 脚手架， 所以是这样的。一种方法是 设置 use-page-scroll 这种方式还要引入另外一个组件。第二种方法 （也是我项目中使用方法）第一次进入时加载了两次。项目中没有问题的代码。
空状态页面设计的艺术与科学
sky768872的博客
07-05 709
空状态界面是用户在网站、APP中遇到的因无数据展示而中断体验的界面，这个界面设计对于解决用户疑惑有着很大的帮助。那么我们应该如何设计空状态界面呢？空状态是指在界面设计中，没有内容或数据时所显示的状态。它可能出现在各种情况下，例如加载中、无数据、错误等。空状态的设计看起来不起眼，蛋仔情感化设计板块来说是不可或缺的一部分，因为它可以帮助用户理解当前的情况，减少困惑和焦虑。即时设计-可实时协作的专业 UI 设计工具。
中存在空数据_你真的够了解“空状态”吗？
weixin_36487530的博客
01-12 260
整理了一下关于空状态的几种常见类型以及设计方法，也算是对自己现阶段所遇到的问题的思考与总结吧！文中图片均来自网络！前言空状态作为APP中不可或缺的一部分，有着举足轻重的作用。当新用户第一次使用产品的时候空状态的设计就显得尤为重要，据相关调查显示“平均下来，app在被下载之后的头3天时间里，日活跃用户(DAU)数量下降了77个百分点。30天内，下降比例达到80%”。“用户会尝试多个同类app，然后在...
“空”的艺术-当数据为空时显示什么
weixin_30911809的博客
02-28 179
第一次写用户体验方面的博文，好鸡冻好紧张... 一、前言 页面内容为空时，我们把它称为“空状态”，也就是对前端来说没有数据的时候。 这时候你要是说空即是色那就太把用户当傻子了... 于是乎，你就看到了这样的设计： 二、目的与价值 1. 引导用户，不会搞得用户云里雾里，然后直接弃了此应用 2. 告知用户本页面/区域所干的核心业务 3. 让页面显得更饱满 创建愉快的用...
JSP页面获取后台页面数据为空的解决
博客
01-12 4937
后台数据从数据库存到list，但是传到jsp页面后list的值为空，这种情况在jsp文件添加 问题就解决了。 这是导入jstl（jsp标准标记库）的语句，导入之后，你就可以使用jstl中的标签了. %@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> %@ taglib uri="http://struts.
android界面空数据，没网络的背景交互
彭思正的博客
06-29 6011
直接效果图（这是模拟了一个没有网络的时候得图） 看下自定义的一个EmptyLayout：（来源于开源中国）因为没什么难度就直接贴代码了 package com.example.baselayoutapp; import android.content.Context; import android.net.ConnectivityManager; import android.net.Net
DIV空值 展示样式 的问题
柠檬の茶
07-21 606
DIV 在做列表展示数据时可能碰到内容为空，此时后面的div会占据空值div的位置，从而影响了整体页面的布局，如下添加min-height:1px;样式，此时空值div会保留原来大小。 div style="width:12%;min-height:1px;cursor: pointer;">div>
python xlwt数据自动居中
最新发布
09-10
Python中的`xlwt`库用于创建和修改旧版的`.xls`格式的Excel文件。要使用`xlwt`实现单元格数据的自动居中，你可以设置单元格样式中的对齐属性。以下是具体的步骤和代码示例： 1. 首先，需要从`xlwt`模块导入`Easyxf`，它是用于定义样式的一个功能强大的工具。 2. 使用`Easyxf`定义一个格式化的字符串，其中包含居中对齐的指令。对于水平和垂直居中，可以使用`'CentreCentre'`。 3. 创建一个`Workbook`对象，它代表整个Excel工作簿。 4. 创建一个`Worksheet`对象，它是实际的工作表。 5. 在工作表中写入数据。 6. 通过`Worksheet`的`write`方法写入数据时，传入之前创建的格式化对象。 下面是一个简单的代码示例： ```python import xlwt # 定义居中对齐的格式 style = xlwt.easyxf('CentreCentre') # 创建一个工作簿对象 workbook = xlwt.Workbook() # 添加一个工作表 worksheet = workbook.add_sheet('Sheet1') # 在第一行第一列写入居中对齐的文本 worksheet.write(0, 0, '居中的文本', style) # 保存工作簿 workbook.save('centered.xls') ``` 在上述代码中，我们创建了一个工作表，并在第一行第一列写入了居中对齐的文本“居中的文本”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值