热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何完美的解决时间轴开发中的"绝对定位"导致的Android兼容性问题(断线,断点问题)

这些天,正在赶一个Ionic+phoneGap+Angular1.0的项目整改,具体涉及到的一个时间轴的开发。首先贴出UI设计图,是图中的蓝色部分的开发:备注:由于这部分

这些天,正在赶一个Ionic+phoneGap+Angular1.0的项目整改,具体涉及到的一个时间轴的开发。

首先贴出UI设计图,是图中的蓝色部分的开发:



备注:由于这部分开发其实跟普通的HTML和CSS开发并无两样,所以我的标题并没有具体写Ionic,应该说这是一种开发思路,供所有开发时间轴会出现断线,断点问题的程序员们参考。

一、第一种开发布局方法:

兼容性测试:

Android的不同机型(vivo,oppo,乐视,联想等出现不同程度的断线断点,且断线方向不一)

iOS的不同机型(iPhone 5s小屏手机出现断线断点,其余iOS机型完美适配)

分五部分写。五个div。

1. 左侧的圈,上右虚折线,购买,日期,这四个为一个div。

2. 左侧深色橘色直线,次日起息,这两个是一个div。

3. 中间的圈,中间的上右虚折线,起息,日期,这四个是一个div。

4. 右侧浅色橘色直线,50天锁定期,这两个是一个div。

5. 右侧的圈,上左虚折线,继续持有或债权转让,日期,这四个是一个div。

每个div内部的元素上下居中对齐都是使用绝对定位,没有兼容性问题。而div之间的衔接上,用的是left具体px直,长度用百分比等等,就会出现兼容性问题。



二、第二种开发布局方法:

兼容性测试:Android的所有机型完美适配;iOS的所有机型完美适配。☺


布局思路:

一根浅色橘色的直线从最左到最右,90%的长度比。

    (1)一根深色橘色的直线从最左到中间,用120px。在这跟深色橘色直线上加两个左右的div,一个左圈、虚线、文字;一个右圈、虚线、文字;且圈,用3px的边框,和白色的背景即可。次日起息的文字也可以对齐。

    (2)一根透明色的直线从最左到最右,100%,一个右圈、虚线、文字。50天锁定期,使用换算66%写30天锁定期。


代码精髓如下:

HTML:

{{product.buyDate | date:'yyyy-MM-dd'}}
购买
{{product.interestDate | date:'yyyy-MM-dd'}}
起息
次日起息
{{product.outLockDate | date:'yyyy-MM-dd'}}
继续持有或债权转让
{{product.period}}天锁定期

CSS:

.new_middle_box{
    width:90%;
    height:4px;
    background-color:#ffba99;
    margin:0 auto;
}
.new_left_box{
    float: left;
    width: 120px;
    height: 4px;
    background-color: #fd6d28;
    position: relative;
}
.new_left_circle{
    width: 12px;
    height: 12px;
    border: 3px solid #fd6d28;
    background-color: #fff;
    border-radius: 6px;
    position: absolute;
    left:0;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.new_right_circle{
    width: 12px;
    height: 12px;
    border: 3px solid #fd6d28;
    background-color: #fff;
    border-radius: 6px;
    position: absolute;
    right:0;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.new_left_top_dotted{
    width: 30px;
    height: 10px;
    border: 1px dotted #ffba99;
    margin-top: -14px;
    margin-left: 3px;
    border-right: none;
    border-bottom: none;
}
.new_left_buy_text{
    width: 100px;
    font-size: 0.9rem;
    position: absolute;
    top: -55px;
    color: #333;
}
.new_timeLine_box{
    padding:30px 0;
}
.new_right_buy_text{
    width: 140px;
    font-size: 0.9rem;
    position: absolute;
    top: -55px;
    right: 0;
    text-align: right;
    color: #333;
    white-space: nowrap;
}
.new_right_top_dotted{
    width: 30px;
    height: 10px;
    border: 1px dotted #ffba99;
    border-left: none;
    border-bottom: none;
    position: absolute;
    top: -14px;
    right: 3px;
}
.new_right_box{
    float: right;
    width: 100%;
    height: 4px;
    background-color: transparent;
    position: relative;
    top:-4px;
}
.new_right_box_circle{
    width: 12px;
    height: 12px;
    border: 3px solid #fd6d28;
    background-color: #fff;
    border-radius: 6px;
    position: absolute;
    right:0;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.new_left_box_bottomText{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    color: #fd6d28;
    font-size: 0.8rem;
    top: 12px;
}
.new_right_box_bottomText{
    position: absolute;
    left: 66%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    color: #fd6d28;
    font-size: 0.8rem;
    top: 12px;
}


真的是完美哦!prefect哦!主要是思路很perfect!有没有很棒棒哦!~~~


推荐阅读
  • 在Android 4.4系统中,通过使用 `Intent` 对象并设置动作 `ACTION_GET_CONTENT` 或 `ACTION_OPEN_DOCUMENT`,可以从相册中选择图片并获取其路径。具体实现时,需要为 `Intent` 添加相应的类别,并处理返回的 Uri 以提取图片的文件路径。此方法适用于需要从用户相册中选择图片的应用场景,能够确保兼容性和用户体验。 ... [详细]
  • 作为软件工程专业的学生,我深知课堂上教师讲解速度之快,很多时候需要课后自行消化和巩固。因此,撰写这篇Java Web开发入门教程,旨在帮助初学者更好地理解和掌握基础知识。通过详细记录学习过程,希望能为更多像我一样在基础方面还有待提升的学员提供有益的参考。 ... [详细]
  • 深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]
  • 资源管理器的基础架构包括三个核心组件:1)资源池,用于将CPU和内存等资源分配给不同的容器;2)负载组,负责承载任务并将其分配到相应的资源池;3)分类函数,用于将不同的会话映射到合适的负载组。该系统提供了两种主要的资源管理策略。 ... [详细]
  • 单链表的高效遍历及性能优化策略
    本文探讨了单链表的高效遍历方法及其性能优化策略。在单链表的数据结构中,插入操作的时间复杂度为O(n),而遍历操作的时间复杂度为O(n^2)。通过在 `LinkList.h` 和 `main.cpp` 文件中对单链表进行封装,我们实现了创建和销毁功能的优化,提高了单链表的使用效率。此外,文章还介绍了几种常见的优化技术,如缓存节点指针和批量处理,以进一步提升遍历性能。 ... [详细]
  • 小王详解:内部网络中最易理解的NAT原理剖析,挑战你的认知极限
    小王详解:内部网络中最易理解的NAT原理剖析,挑战你的认知极限 ... [详细]
  • 第六章:枚举类型与switch结构的应用分析
    第六章深入探讨了枚举类型与 `switch` 结构在编程中的应用。枚举类型(`enum`)是一种将一组相关常量组织在一起的数据类型,广泛存在于多种编程语言中。例如,在 Cocoa 框架中,处理文本对齐时常用 `NSTextAlignment` 枚举来表示不同的对齐方式。通过结合 `switch` 结构,可以更清晰、高效地实现基于枚举值的逻辑分支,提高代码的可读性和维护性。 ... [详细]
  • ButterKnife 是一款用于 Android 开发的注解库,主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法,包括如何通过注解实现字段和方法的绑定,以及在实际项目中的应用示例。此外,文章还提到了截至 2016 年 4 月 29 日,ButterKnife 的最新版本为 8.0.1,为开发者提供了最新的功能和性能优化。 ... [详细]
  • 本文介绍了如何在iOS平台上使用GLSL着色器将YV12格式的视频帧数据转换为RGB格式,并展示了转换后的图像效果。通过详细的技术实现步骤和代码示例,读者可以轻松掌握这一过程,适用于需要进行视频处理的应用开发。 ... [详细]
  • DRF框架中Serializer反序列化验证机制详解:深入探讨Validators的应用与优化
    在DRF框架的反序列化验证机制中,除了基本的字段类型和长度校验外,还常常需要进行更为复杂的条件限制校验。通过引入`validators`模块,可以实现自定义校验逻辑,如唯一字段校验等。本文将详细探讨`validators`的使用方法及其优化策略,帮助开发者更好地理解和应用这一重要功能。 ... [详细]
  • 本文探讨了如何有效地构建和优化微信公众平台账号,涵盖了用户信息管理、内容创作与发布、互动策略及数据分析等方面。通过合理设置用户信息字段,如用户名、昵称、密码、真实姓名和性别等,确保账号的安全性和用户体验。同时,文章还介绍了如何利用微信公众平台的各项功能,提升用户参与度和品牌影响力。 ... [详细]
  • SQLite数据库CRUD操作实例分析与应用
    本文通过分析和实例演示了SQLite数据库中的CRUD(创建、读取、更新和删除)操作,详细介绍了如何在Java环境中使用Person实体类进行数据库操作。文章首先阐述了SQLite数据库的基本概念及其在移动应用开发中的重要性,然后通过具体的代码示例,逐步展示了如何实现对Person实体类的增删改查功能。此外,还讨论了常见错误及其解决方法,为开发者提供了实用的参考和指导。 ... [详细]
  • 本文深入探讨了CGLIB BeanCopier在Bean对象复制中的应用及其优化技巧。相较于Spring的BeanUtils和Apache的BeanUtils,CGLIB BeanCopier在性能上具有显著优势。通过详细分析其内部机制和使用场景,本文提供了多种优化方法,帮助开发者在实际项目中更高效地利用这一工具。此外,文章还讨论了CGLIB BeanCopier在复杂对象结构和大规模数据处理中的表现,为读者提供了实用的参考和建议。 ... [详细]
  • 寒假作业解析:第三周 2月12日 第7题
    尽快完成之前的练习任务!每日一练2.1 Problem A Laurenty and Shop 的题目要求是选择两条不同的路线以最小化总的等待时间。简要分析:通过对比不同路线的等待时间,可以找到最优解。此问题可以通过动态规划或贪心算法来解决,具体取决于路线的复杂性和约束条件。 ... [详细]
  • 本文深入解析了C++中`while`循环的使用方法及其应用场景,包括计数控制和时间控制两种主要类型。通过具体的代码示例,详细介绍了如何利用`while`循环实现精确的计数控制和灵活的时间控制,帮助读者更好地理解和掌握这一重要的编程结构。此外,文章还探讨了`while`循环在实际开发中的常见用法和优化技巧,为初学者提供了宝贵的实践经验。 ... [详细]
author-avatar
萝莉控的小潴_515
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有