记录个问题,当作笔记吧:因为vue项目的移动端vant ui 的step组件跟ui设计图有差别,研究了半天还是没法使用step组件,只能手动设置一个

先上效果图和代码:

(1)HTML部分

<div class="rxlc-step">
<div class="rxlc-content">
<div class="content-list" v-for="(item, index) in rxlc_content" :key="index">
<div class="content-list-lt">
<div class="list-icon-title">
<div class="lt-icon">
<div class="lt-icon-box"></div>
</div>
<div class="lt-text">{{item.title}}</div>
</div>
<div class="white-line"></div>
</div>
<div class="content-list-rt">
<div class="list-rt-content">{{item.text}}</div>
<div class="cat-line"></div>
</div>
</div>
</div>
</div>

(2)CSS部分

.rxlc-step {
width: 100%;
padding: 16px 18px 20px 17px;
box-sizing: border-box;
.rxlc-content {
width: 100%;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
border-radius: 10px;
position: relative;
.content-list {
width: 100%;
display: table;
.content-list-lt {
display: table-cell;
background: #3db8ba;
padding-left: 10px;
position: relative;
color: #ffffff;
font-family: Noto Sans S Chinese Medium;
font-size: 16px;
.list-icon-title {
display: table;
.lt-icon {
display: table-cell;
.lt-icon-box {
width: 5px;
height: 5px;
border-radius: 3px;
background: #ffffff;
margin-right: 7px;
z-index:;
}
}
.lt-text {
display: table-cell;
padding-right: 10px;
font-weight:;
font-size: 16px;
line-height: 18px;
}
}
.white-line {
width: 1px;
height: 100%;
position: absolute;
top: 34px;
left: 12px;
background: #ffffff;
opacity: 0.2;
z-index:;
}
}
.content-list-rt {
width: 70%;
display: table-cell;
.list-rt-content {
padding: 22px 14px 0px 14px;
color: #333333;
font-size: 14.5px;
line-height: 18px;
}
.cat-line {
margin-left: 24px;
margin-top: 20px;
border-bottom: 1px solid #efefef;
}
}
&:first-child {
.content-list-lt {
border-radius: 10px 0 0 0;
}
}
&:last-child {
.content-list-lt {
border-radius: 0 0 0 10px;
.white-line {
width: 0px;
}
}
.content-list-rt {
.cat-line {
margin-left: 10px;
margin-top: 20px;
border-bottom: none;
}
}
}
}
}
}

(3)JS部分

rxlc_content: [
{
title: '注册',
text: '家长手机号注册账号'
},
{
title: '新生信息采集',
text: '报名信息采集,包括新生基础信息、监护人信息和个人相关图片资料上传;提交资料进入审核阶段'
},
{
title: '网上审核',
text: '网上报名资料提交至区教育局或下属单位进行审核确认'
},
{
title: '现场审核',
text: '网上报名资料审核通过,根据现场审核要求携带资料到指定地点审核确认'
},
{
title: '录取',
text: '新生现场审核通过,报读 学校发布录取通知。'
}
]

  说一下原理吧,其实我刚开始的时候想的是先给每一行的div(类名content-list)设置用display:table布局,先将标题和内容放在两个display:table-cell的子div(类名content-list-lt和content-list-rt)中,然后用绝对定位将白线定位到白色圆形的中心位置,后面发现白线位置好控制,但是会出现一个问题,就是因为每一行的高度是由内容的长度撑开的,白线的总长度就很难控制了,没办法,只能请教鹏哥了,他叫我参照下vant 的steps的样式,打开F12查看了下,发现了些好玩的东西,如下:

  

  通过上面的两张图可以看到,vant的steps组件的线条也是利用绝对定位来实现的,只是它的定位是相对于每个类名为vant-step的div(每一行内容所在的div),且它的高度为每一行内容的高度,即height:100%设置,这样各行的白色线条就连成一条竖直的线,那么步骤条的长度问题也得到解决。

  需要注意的是我们最后一行的内容的白色线条是不需要展示出来的,因为实际我们要的线条段数为内容行数减1,所以最后一个div的线条的高度必须隐藏掉,所以给最后一个div的线条设置了width:0,其实设置height:0也是可以的。

  这样我们将之前的代码改动一下,把白色线条放在每一行的div(类名content-list)下的左边子div(即类名content-list-lt)中,让线条相对这个类名为content-list-lt的div进行绝对定位,就能实现steps组件效果了

自定义vant ui steps组件效果实现的更多相关文章

  1. React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发

    React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发   2016/09/23 |  React Native技术文章 |  Sky丶清|  4 条评论 |  1 ...

  2. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  3. 自定义view实现水波纹效果

    水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...

  4. iOS 端的 UI 聊天组件ChatKit及代码实现

    ChatKit 是一个免费且开源的 UI 聊天组件,自带云服务器,自带推送,支持消息漫游,消息永久存储.底层聊天服务基于LeanCloud(原名 AVOS ) 的 IM 实时通信服务「LeanMess ...

  5. Combo( 自定义下拉框) 组件

    本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于ValidateBox(验证框)组件 一. 加载方式自定义下拉框不能通过标签的方式进行创建.<input ...

  6. 第17讲- UI常用组件之ImageView图片浏览

    第17讲 UI常用组件之ImageView图片浏览 二.图片浏览ImageView ImageView就是一个用来显示图片的视图: ImageView常见属性 常见属性 对应方法 说明 android ...

  7. VSTO之旅系列(三):自定义Excel UI

    原文:VSTO之旅系列(三):自定义Excel UI 本专题概要 引言 自定义任务窗体(Task Pane) 自定义选项卡,即Ribbon 自定义上下文菜单 小结 引言 在上一个专题中为大家介绍如何创 ...

  8. Vue.use自定义自己的全局组件

    通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-sim ...

  9. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

随机推荐

  1. java虚拟机规范(se8)——class文件格式(七)

    4.7.5 Exceptions 属性 Exceptions 属性是一个变长属性,它位于 method_info(§4.6)结构的属性表中. Exceptions 属性指出了一个方法需要检查的可能抛出 ...

  2. Linux查询Java进程以及杀掉其进程

    今天公司VPN掉线后,访问项目出错502. 百度了说是nginx代理错误,但入职不久不知道咋搞... 于是乎就想重启一下Java应用. 1.找到Java应用的进程 jps 命令    和   ps - ...

  3. 联想think system sr550信息

    带外管理口 默认IP地址:192.168.70.125 默认用户名密码 USERID PASSW0RD    0是数字0

  4. 2019牛客暑期多校训练营(第三场)I Median

    题意:给出n-2的中位数序列b,b[i]代表原序列中(a[i],a[i+1],a[i+2])的中位数,求a. 解法:比赛的时候没做出来,赛后看题解的.解法跟网上各位大佬一样:首先要证明其实原序列a中的 ...

  5. 九、结构模式之装饰(Decorator)模式

    装饰模式又叫包装模式,装饰模式以客户端透明的方式扩展对象的功能,是继承关系的一个替代方案.装饰模式可以在不使用创造更多的子类的情况下,将对象的功能加以扩展. 装饰模式结构图如下: 其包含的角色就分为: ...

  6. iview table的render()函数的用法

    语法:render:(h,params)=>{} render:(h,params) => { return h(" 定义的元素 ",{ 元素的性质 }," ...

  7. 安装cuDNN

    cuDNN cuDNN是GPU加速计算深层神经网络的库(下载链接,前文已提供). 本人的下载文件是:cudnn-7.0-linux-x64-v4.0-prod.tgz 在终端中切换到文件所在文件夹,输 ...

  8. 【集群】Redis哨兵(Sentinel)模式

    主从切换技术的方法是:当主服务器宕机后,需要手动把一台从服务器切换为主服务器,这就需要人工干预,费事费力,还会造成一段时间内服务不可用.这不是一种推荐的方式,更多时候,我们优先考虑哨兵模式. 一.哨兵 ...

  9. UNP学习 非阻塞I/O

    缺省状态下,套接口时阻塞方式的.这意味着当一个套接口调用不能立即完成时,进程进入睡眠状态,等待操作完成.我们将可能阻塞的套接口调用分成四种. 1.输入操作:read.readv.recv.recvfr ...

  10. Android中通过反射获取资源Id(特别用在自己定义一个工具将其打成.jar包时,特别注意资源的获取)

    在将自己写的工具打成.jar包的时候,有时候会需要引用到res中的资源,这时候不能将资源一起打包,只能通过反射机制动态的获取资源. /** * 反射得到组件的id号 */ public static ...