自定义vant ui steps组件效果实现
记录个问题,当作笔记吧:因为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组件效果实现的更多相关文章
- React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发
React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发 2016/09/23 | React Native技术文章 | Sky丶清| 4 条评论 | 1 ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- 自定义view实现水波纹效果
水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...
- iOS 端的 UI 聊天组件ChatKit及代码实现
ChatKit 是一个免费且开源的 UI 聊天组件,自带云服务器,自带推送,支持消息漫游,消息永久存储.底层聊天服务基于LeanCloud(原名 AVOS ) 的 IM 实时通信服务「LeanMess ...
- Combo( 自定义下拉框) 组件
本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于ValidateBox(验证框)组件 一. 加载方式自定义下拉框不能通过标签的方式进行创建.<input ...
- 第17讲- UI常用组件之ImageView图片浏览
第17讲 UI常用组件之ImageView图片浏览 二.图片浏览ImageView ImageView就是一个用来显示图片的视图: ImageView常见属性 常见属性 对应方法 说明 android ...
- VSTO之旅系列(三):自定义Excel UI
原文:VSTO之旅系列(三):自定义Excel UI 本专题概要 引言 自定义任务窗体(Task Pane) 自定义选项卡,即Ribbon 自定义上下文菜单 小结 引言 在上一个专题中为大家介绍如何创 ...
- Vue.use自定义自己的全局组件
通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-sim ...
- [转]vue Element UI走马灯组件重写
https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...
随机推荐
- java虚拟机规范(se8)——class文件格式(七)
4.7.5 Exceptions 属性 Exceptions 属性是一个变长属性,它位于 method_info(§4.6)结构的属性表中. Exceptions 属性指出了一个方法需要检查的可能抛出 ...
- Linux查询Java进程以及杀掉其进程
今天公司VPN掉线后,访问项目出错502. 百度了说是nginx代理错误,但入职不久不知道咋搞... 于是乎就想重启一下Java应用. 1.找到Java应用的进程 jps 命令 和 ps - ...
- 联想think system sr550信息
带外管理口 默认IP地址:192.168.70.125 默认用户名密码 USERID PASSW0RD 0是数字0
- 2019牛客暑期多校训练营(第三场)I Median
题意:给出n-2的中位数序列b,b[i]代表原序列中(a[i],a[i+1],a[i+2])的中位数,求a. 解法:比赛的时候没做出来,赛后看题解的.解法跟网上各位大佬一样:首先要证明其实原序列a中的 ...
- 九、结构模式之装饰(Decorator)模式
装饰模式又叫包装模式,装饰模式以客户端透明的方式扩展对象的功能,是继承关系的一个替代方案.装饰模式可以在不使用创造更多的子类的情况下,将对象的功能加以扩展. 装饰模式结构图如下: 其包含的角色就分为: ...
- iview table的render()函数的用法
语法:render:(h,params)=>{} render:(h,params) => { return h(" 定义的元素 ",{ 元素的性质 }," ...
- 安装cuDNN
cuDNN cuDNN是GPU加速计算深层神经网络的库(下载链接,前文已提供). 本人的下载文件是:cudnn-7.0-linux-x64-v4.0-prod.tgz 在终端中切换到文件所在文件夹,输 ...
- 【集群】Redis哨兵(Sentinel)模式
主从切换技术的方法是:当主服务器宕机后,需要手动把一台从服务器切换为主服务器,这就需要人工干预,费事费力,还会造成一段时间内服务不可用.这不是一种推荐的方式,更多时候,我们优先考虑哨兵模式. 一.哨兵 ...
- UNP学习 非阻塞I/O
缺省状态下,套接口时阻塞方式的.这意味着当一个套接口调用不能立即完成时,进程进入睡眠状态,等待操作完成.我们将可能阻塞的套接口调用分成四种. 1.输入操作:read.readv.recv.recvfr ...
- Android中通过反射获取资源Id(特别用在自己定义一个工具将其打成.jar包时,特别注意资源的获取)
在将自己写的工具打成.jar包的时候,有时候会需要引用到res中的资源,这时候不能将资源一起打包,只能通过反射机制动态的获取资源. /** * 反射得到组件的id号 */ public static ...