仿uniapp - 时间轴组件

介绍

在uniapp 的开发当中 ,经常会使用到一些组件, 比如时间轴组件, uniapp 内置的时间轴组件如下所示：

需求背景

现在自己所做的项目当中, 所遇到的, 和各个相关的组件都不太一样, 所以,在这里,自己手写了一个时间轴

效果图

主要代码

html部分代码：

<view class="history_content"><view class="history_content_item" v-for="(item,id) in historyList" :key="id"><view class="history_left_item" ><view class="item_year">{{item.leftYear}}</view><view class="item_line"><view class="item_line_dot"></view></view><view class="item_desc"><view class="desc_list" v-for="(list,id) in item.leftItem" :key="id"><view class="title">{{list.leftTitle}}</view><view class="word">{{list.leftDesc}}</view></view></view></view><view class="history_right_item" ><view class="item_desc"><view class="desc_list" v-for="(right,id) in item.rightItem" :key="id"><view class="title">{{right.rightTitle}}</view><view class="word">{{right.rightDesc}}</view></view></view><view class="item_line"><view class="item_line_dot"></view></view><view class="item_year">{{item.rightYear}}</view></view></view>
</view>

css部分代码：

.item_year,  .item_desc {flex: 1;
}.history_content .history_left_item ,.history_right_item{width: 620rpx;display: flex;flex-direction: row;
}
.history_content .history_left_item .item_year , .history_right_item .item_year {background-image: url(../../static/images/about/story/image2.png);background-position: 0rpx 10rpx;background-repeat: no-repeat;background-size: 100% ;text-align: center;color: #006CFF;font-size: 34rpx;font-weight: bold;padding-top: 50rpx;
}
.history_content .history_left_item .item_line , .history_right_item .item_line{width: 4rpx;margin: 0 22rpx;background-color:#559DFF;
}
.history_content .history_left_item .item_line .item_line_dot , .history_right_item .item_line .item_line_dot  {width: 14px;height: 14px;background-color: #559DFF;border-radius: 50%;position: relative;left: -14rpx;top: 60rpx;
}
.history_content .history_left_item .item_desc {padding-bottom: 100rpx;margin-top: 100rpx;
}
.history_content .history_right_item .item_desc {margin-top: 100rpx;padding-bottom: 100rpx;
}
.history_content .history_left_item .item_desc .desc_list {padding: 0rpx 0 20rpx 20rpx;
}
.history_content .history_left_item .item_desc .desc_list .title ,  .history_right_item .item_desc .desc_list .title{font: 24rpx;font-weight: 400;color: #559DFF;
}
.history_content .history_left_item .item_desc .desc_list .word,  .history_right_item .item_desc .desc_list .word{font-size: 24rpx;font-weight: 400;color: #5F6B82;
}
.history_content .history_right_item .item_desc .desc_list {text-align: right;padding: 0rpx 20rpx 20rpx 0rpx;
}

js 部分代码：

export {data() {return {historyList: [{id: "0",leftYear: '2020年',rightYear: "2019年",leftItem: [{id: 0,leftTitle: "5月",leftDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'},{id: 1,leftTitle: "4月",leftDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'}],rightItem: [{id: 0,rightTitle: "12月",rightDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'},{id: 1,rightTitle: "9月",rightDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'}]},    {id: "1",leftYear: '2018年创新',rightYear: "2017年发展",leftItem: [{id: 0,leftTitle: "12月",leftDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'},{id: 1,leftTitle: "11月",leftDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'}                  ],rightItem: [{id: 0,rightTitle: "12月",rightDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'},{id: 1,rightTitle: "10月",rightDesc: '文案文案文案文案文案文案文案文案文案文案文案文案文案'}]},]}}

至此, 就全部结束了, 通过两层循环, 将数据渲染出来即可。

仿uniapp - 时间轴组件相关推荐

7 个漂亮的 JavaScript 的时间轴组件 [转]
时间轴:通过互联网技术,依据时间顺序,把一方面或多方面的时间足迹事件串联起来,形成相对完整的记录体系,再运用图文的形式呈现给用户:时间轴可以运用于不同领域,最大的作用就是把过去的事物系统化.完整化. ...
Python数据可视化 Pyecharts 制作 Timeline 时间轴组件
Python3 的 Pyecharts 制作 Timeline(时间轴组件) 时需要使用的设置参数和常用模板案例,可根据实际情况对案例中的内容进行调整即可. 文章目录 Demo 时间轴&轴饼图 ...
SkeyeVSS综合安防监控录像回放控制之自定义可拖动时间轴组件
SkeyeVSS综合安防视频云服务通过接入SkeyeRMS录像服务器实现对系统里的摄像机等设备录像,通过自定义的时间轴组件对录像记录进行加载渲染,播放器回调时间与下面时间轴相互联动,集拖动.点击.缩放 ...
Python数据可视化-使用 Pyecharts 制作 Timeline（时间轴组件）详解
内容介绍本文介绍基于 Python3 的 Pyecharts 制作 Timeline(时间轴组件) 时需要使用的设置参数和常用模板案例,可根据实际情况对案例中的内容进行调整即可. 使用 Pyecha ...
数据可视化：时间轴组件
目录前言一.数据可视化是什么二.时间轴组件的作用三.时间轴组件画雷达图 1.数据的导入和处理 2.读入数据 3.画雷达图 4.加入时间轴四.总结前言通过数据可视化的学习,我对时间轴组件画 ...
react创建组件_如何使用React创建时间轴组件
react创建组件 These days I've been working on a new page for my website. I wanted to have a Timeline to ...
vue+canvas绘制时间轴组件
说明: 此组件使用vue2语法以及canvas实现. 效果图: 线上地址: time-select-line 安装: npm i time-select-line --save 导入: import ...
Android仿iphone时间轴相册
实现效果: 首先写需要用到的图片数据:时间.文件名.路径等 [html] view plain copy package com.example.a550211.cd; import java.tex ...
Flutter时间轴（timeline）
组件在业务开发中经常会使用到timeline时间轴,来记录数据操作记录等,在这本人封装了一个相对较通用的时间轴组件. 示例参数参数类型必填说明 timelineList List 是时间 ...
使用ivx滑动时间轴制作动画效果的经验总结
之前的案例中使用过时间轴制作动画效果,其实在ivx中还有一个滑动时间轴组件,它必须添加在画布组件下,虽然也是通过给组件添加轨迹实现播放效果,不过根据名字比较容易理解它是通过滑动来触发播放的,而且可以选 ...

仿uniapp - 时间轴组件

介绍

需求背景

效果图

主要代码

仿uniapp - 时间轴组件相关推荐

最新文章

热门文章