好看的移动端H5应用效果及样式借鉴

本文探讨了支付宝、饿了么、网易新闻及淘宝等应用中的UI交互设计细节,包括页面切换方式、动画效果、回到顶部按钮的设计以及导航栏的变化等,为开发者提供灵感。

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

支付宝

  1. 页面切换采用从下往上滑动,而且不是从底部滑上来,而是距离顶部大概200px的位置快速滑上来,感觉很自然。
  2. 缓冲的效果,就是一个圆圈不停转动的效果,作为一个遮罩层,等内容加载完,遮罩层隐去,内容浮现。
  3. 回到顶部按钮。一滚动页面右下方就出现回到顶部按钮。一回到顶部按钮消失。
  4. 导航栏在幻灯片下面。一开始滚动页面的时候导航栏随之移动,当导航栏触碰到顶部的时候导航栏就不动了。有一个新的css3属性可以方便支持这个效果,position:sticky。目前为了兼容性可以使用js计算。
  5. 展开合上的箭头有3d的翻转效果,参考阿里去啊的展开,感觉很不错。
  6. 深刻了解BFC。阿里的产品基本都遵循这个原理,不会因为内容还未缓冲就出现坍塌等效果。

饿了么

  1. 页面内容出现前在内面中做一些动画效果,等到内容加载完成后再呈现内容。
  2. 弹层从中心开始从小变大。
  3. 往下滚动不出现回到顶部按钮,向上滚动的时候出现回到顶部按钮,而且按钮是从下往上上来的。往下滚动的时候回到顶部按钮又会下去。
  4. 颜色比较鲜艳,让人看了比较愉悦,看上去年轻化。
  5. 搜索的放大镜图标的出现效果,很动感。弹层出现的也很动感。

网易新闻

  1. 下拉刷新的效果,一开始刚进入时会自动刷新的效果。
  2. 数据的标准化,在一开始就会有固定宽高的轮廓,然后会有相应内容填充进去。我不知道是传过来的数据结构已经遵循了一些规则还是没有规则的数据传过来后前端进行拼装的。
  3. 左滑右滑一起使用。点击左键左滑,点击右边右滑。滑动要快速。
  4. 点击按钮的时候按钮会变色。
  5. 展开合上按钮,点击展开之后延迟一会儿再展开,点击合上立即合上。展开和合上的效果不一定要一样。

淘宝

  1. DOM结构已经加载出来了,但下面的数据是滚动之后再加载的。跟网易新闻差不多的效果。
  2. 微淘里面评论的效果,感觉很舒服。
  3. 导航栏选择的时候会移动(当导航项比较多的时候)。
<think>好的,我现在需要解决用户在移动端H5中实现表格竖向显示的问题。首先,用户的需求是将传统的横向表格改为竖向布局,也就是行列转置,可能是在屏幕空间有限的移动设备上更好地展示数据。接下来,我得回忆一下相关的CSS和HTML知识,以及移动端布局的常见方法。 首先,常规的HTML表格是使用<table>标签,包含<tr>作为行,<td>作为单元格。默认情况下,表格是横向排列的,每一行代表一条记录,列代表不同的字段。要实现竖向显示,可能需要将行和列的显示方式对调,也就是每个字段作为一行,每个记录作为一列。不过,直接使用表格标签可能不太容易实现这一点,因为表格的结构比较固定。 这时候,可能需要考虑使用CSS来改变布局方式。Flexbox或者Grid布局是比较现代的方法,可以更灵活地控制元素的排列。特别是Flexbox,在移动端支持较好,适合处理一维布局。或者,Grid布局适合二维布局,但可能在兼容性上需要考虑。 另外,用户提到的是移动端H5,所以响应式设计很重要,需要确保布局在不同屏幕尺寸下都能正常显示。可能还需要考虑使用媒体查询来调整样式。 然后,我需要参考用户提供的引用内容。引用[1]提到了react版本的h5-table支持虚拟列表,可能和性能优化有关,但用户的问题是关于布局的,所以暂时可能不直接相关。引用[2]和[3]提到了移动端布局的基本CSS设置,比如盒模型、弹性布局等,这些可能对解决当前问题有帮助。引用[4]讨论了移动端列表的制作方法,可能涉及到列表项的排列方式,或许可以借鉴其中的思路应用到表格布局中。 接下来,思考具体的实现方法。一种方法是将表格的数据结构进行转置,然后在HTML中重新组织,将原来的列变为行,行变为列。例如,如果原来的表格是: <table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> </table> 竖向显示的话,可能需要变成: <div class="vertical-table"> <div class="row"> <div class="header">姓名</div> <div class="cell">张三</div> </div> <div class="row"> <div class="header">年龄</div> <div class="cell">25</div> </div> </div> 然后使用Flexbox来布局每个.row,让header和cell横向排列,但每个.row代表原来的一个字段,这样整体看起来就是竖向的了。这种方法需要将原来的表格结构转换为这样的div结构,可能需要用JavaScript或者服务器端渲染来动态生成。 另一种方法是使用CSS transform来旋转表格,但这种方法可能会导致文字方向的问题,不太推荐。或者,使用display: flex或者display: grid来重新定义布局,而无需改变HTML结构。例如,对table元素应用flex-direction: column,但可能浏览器的默认表格布局会干扰,所以可能还是需要用div来模拟表格。 另外,考虑到移动端的触摸滚动,可能需要确保竖向表格在窄屏幕上可以水平滚动,避免内容被挤压。可以给容器设置overflow-x: auto,并设置最小宽度,保证内容不会被截断。 然后,结合引用中的内容,引用[3]提到列表项的高度和行高设置,可能类似每个字段行的样式设置。比如,每个竖向的行需要固定的高度,或者根据内容自适应。引用[2]中的全局样式重置,可能需要注意盒模型,设置box-sizing: border-box,以便更好地控制内边距和边框。 最后,总结可能的步骤:使用div结构模拟表格,应用Flexbox布局,设置header和cell的排列方向,处理响应式滚动,并确保样式移动端的兼容性。同时,可能需要动态生成HTML结构,或者手动调整结构以适应竖向显示。</think>在移动端H5中实现表格竖向显示,可通过以下方法解决: ### 一、Flexbox弹性布局方案 ```html <div class="vertical-table"> <!-- 每行对应原始表格的列 --> <div class="v-row"> <div class="v-header">姓名</div> <div class="v-cell">张三</div> <div class="v-cell">李四</div> </div> <div class="v-row"> <div class="v-header">年龄</div> <div class="v-cell">25</div> <div class="v-cell">28</div> </div> </div> <style> .vertical-table { display: flex; flex-direction: column; min-width: 300px; /* 保证最小显示宽度 */ overflow-x: auto; /* 窄屏横向滚动 */ } .v-row { display: flex; border-bottom: 1px solid #eee; } .v-header { flex: 0 0 6rem; /* 固定标题宽度 */ background: #f5f5f5; padding: 1rem; font-weight: bold; } .v-cell { flex: 1; padding: 1rem; min-width: 8rem; /* 单元格最小宽度 */ } </style> ``` ### 二、CSS Grid网格布局方案 ```html <div class="grid-table"> <div class="grid-header">姓名</div> <div class="grid-cell">张三</div> <div class="grid-cell">李四</div> <div class="grid-header">年龄</div> <div class="grid-cell">25</div> <div class="grid-cell">28</div> </div> <style> .grid-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); overflow-x: auto; } .grid-header { background: #f5f5f5; font-weight: bold; padding: 1rem; position: sticky; left: 0; z-index: 1; } </style> ``` ### 三、响应式处理技巧 1. **横向滚动优化**:添加`overflow-x: auto`容器,配合`-webkit-overflow-scrolling: touch`增强移动端滚动体验[^3] 2. **固定标题列**:使用`position: sticky`实现标题固定 3. **自适应处理**:通过`minmax()`函数设置网格列的最小/最大宽度 4. **触摸友好**:确保点击区域不小于44×44像素(符合苹果人机界面指南) ### 四、数据结构转换建议 当动态生成竖向表格时,需要进行数据转置处理: ```javascript // 原始数据格式 const originData = [ { name: &#39;张三&#39;, age: 25 }, { name: &#39;李四&#39;, age: 28 } ]; // 转置为竖向结构 const verticalData = Object.keys(originData[0]).map(key => ({ header: key, values: originData.map(item => item[key]) })); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值