当前位置: 首页 > Web前端 > vue.js

vue时间轴风格的图片显示

时间:2023-03-31 23:09:38 vue.js

项目接近完成。在修复bug的同时,它也会审查和分析自己项目中的代码。回头看看半年前写的东西,很多真的很陌生,所以趁着下午的空余时间总结一下之前遇到的难点。好了,我们从上图开始,先分析上下层的目标效果,上层样本轮播,下层分层时间轴+小样本展示,需要注意的是上下层的样本lowerlayers是逻辑的,即点击lowerlayersmallsample,上层sample会响应上下两个stepper,上层会影响下层,下层时间轴不会影响上层layertimescale,这里我偷懒了,我直接用sample的时间代替等宽timeline首先是上层的html代码

是左右stepper和中间的图片addevent然后是下面的html代码
{{item.time}}

{{item.title}}

是那个将被移动的div添加ref,样式为position:relative;left:0,设置小样本上下流的样式,ps:时间轴的圆形节点要放在for循环方法代码中lefthandlePre(){letleft=parseInt(this.$refs.mytimeline.style.left);如果(左<(-220)){this.$refs.mytimeline.style.left=left+250+'px';}}不是最左边的时候可以向左移动,步长应该是小样本的长度然后向右移动handleNext(){letleft=parseInt(this.$refs.mytimeline.style.left);if(left<=20&&(left>=-650)){this.$refs.mytimeline.style.left=left-250+'px';}},不在最右边的时候,可以向右移动。这里的限制是总长度减去小样本的长度。成品展示