分类：时间轴

2022
03-17

vue+canvas绘制时间轴的方法

本文实例为大家分享了vuecanvas绘制时间轴的具体代码，供大家参考，具体内容如下最近在研究canvas绘制时间轴，直接上代码，希望分享能给大家带来帮助，效果如下：代码如下，可以拷贝到vue项目中直接预览<template><div><canvasid="time_line"width="1200"height="27"></canvas></div></template><script>exportdefault{name:'pathwaytrack',data(){return{screenWidth:document.body.clientWidth... 继续阅读 >

2022
03-17

Vue.js实现时间轴功能

本文实例为大家分享了Vue.js实现时间轴功能的具体代码，供大家参考，具体内容如下GitHub时间轴组件封装Main.js<template><divclass="timeline-main"><divclass="timeline-axis"><divclass="axis-item"v-for="(time,index)indateTimes":key="index"><divclass="axis-item-tick":class="{'axis-item-tick-active':index===highlightIndex}"@mouseenter="hoverI... 继续阅读 >

2022
03-16

vue+swiper实现时间轴效果

本文实例为大家分享了vue+swiper实现时间轴效果的具体代码，供大家参考，具体内容如下效果：首先引入，有淘宝镜像的用cnpminstallswiper--save没有的用npminstallswiper--save<template><divclass="hello"style="height:100%;width:100%;position:relative;"><divclass="swiperlist"><divclass="swipers"><divclass="swiper-container"><divclass="swiper-wrapper"><div... 继续阅读 >

2022
03-16

vue实现物流时间轴效果

本文实例为大家分享了vue实现物流时间轴效果的具体代码，供大家参考，具体内容如下son组件(物流时间轴组件)<template><divclass="steps-wrap"><ul><liv-for="(item,index)insteps":key="index"><spanclass="time">{{item.time}}</span><divclass="circle"><imgclass="icon"v-if="index===0"src="../../../assets/images/user_seleted.png"/><imgclass="ic... 继续阅读 >

2021
05-25

Android自定义控件实现时间轴

本文实例为大家分享了Android自定义控件实现时间轴的具体代码，供大家参考，具体内容如下由于项目中有需求，就简单的封装一个，先记录一下，有时间上传到github。1、先增加自定义属性：<?xmlversion="1.0"encoding="utf-8"?><resources><declare-styleablename="global_TimelineLayout"><!--时间轴左偏移值--><attrname="global_line_margin_left"format="dimension"/><!--时间轴上偏... 继续阅读 >

2020
10-30

Vue时间轴 vue-light-timeline的用法说明

轻量的vue时间轴组件installnpminstallvue-light-timeline如果你使用的是yarnyarnaddvue-light-timelineusageimportLightTimelinefrom'vue-light-timeline';Vue.use(LightTimeline);<template><light-timeline:items='items'></light-timeline></template>exportdefault{data(){return{items:[{tag:'2019-02-12',content:'测试内容'},{tag:'2019-02-13',type:'circle',... 继续阅读 >