买域名后怎么做网站,网页怎么制作视频,chatgpt 网站,静态网页制作视频教程项目将近完结#xff0c;在修正bug的同时#xff0c;也对自己项目中代码进行回顾分析。看回半年前写的东西#xff0c;真是很多都感到陌生#xff0c;所以趁着下午的空档时间总结下之前遇到的难点。好的#xff0c;先上图#xff0c;目标效果先分析上下两层#xff0c;上…项目将近完结在修正bug的同时也对自己项目中代码进行回顾分析。看回半年前写的东西真是很多都感到陌生所以趁着下午的空档时间总结下之前遇到的难点。好的先上图目标效果先分析上下两层上层样品轮播下层层进式时间轴 小型样本展示要注意的是上下两层的样品是有逻辑的即点击下层小样品上层样品会有响应上下两个步进器上层左右是会影响下层的而下层时间轴横移不会影响上层时间刻度此处偷懒了下我直接用了样品的时间而不是等宽时间线首先是上层的html代码 为左右步进器以及中间图片添加事件然后是下层的html代码{{item.time}}{{item.title}}为将要移动的div添加ref样式为 position: relative; left: 0同时为小样品的上下分流设好样式ps时间轴圆形节点要放在for循环里方法代码左移handlePre() {let left parseInt(this.$refs.mytimeline.style.left);if(left (-220)){this.$refs.mytimeline.style.left left 250 px;}}不为最左边的时候可以左移步进长度应为小样品长度再大一点右移handleNext() {let left parseInt(this.$refs.mytimeline.style.left);if(left 20 (left -650)){this.$refs.mytimeline.style.left left - 250 px;}},不为最右边时可以右移这里限制条件为总长度减去一个小样品的长度成品展示