前端开发第80天——一周总结一、这一周都干了啥 1、改一个需求折磨了我好几天，下周还要继续解决（头大）其实也不是多难

一、这一周都干了啥

1、改一个需求折磨了我好几天，下周还要继续解决（头大）

其实也不是多难一个需求，就是实现文字自滚动，本来以为很快就改好了，结果现场那边展示出问题。

（1）使用superSlide插件实现

$(".picMarquee-top").slide({
    mainCell:".bd ul",
    autoPlay:true,
    effect:"topMarquee",
    vis:3,
    interTime:50,
    trigger:"click"
});

正常使用插件，在现场会出现卡顿现象。关键是这个项目是从别的项目迁过来的，结构大体没变，在旧项目上可以正常运行，排查不出来。

（2）使用swiper插件实现

var mySwiper = new Swiper ('.swiper', { 
    direction: 'vertical', // 垂直切换选项 
    loop: true, // 循环模式选项 
    autoplay: {
        delay: 0
    }
})

还需要修改.swiper-wrapper类中的动画运行方法transition-timing-function： ease;为linear
使用swiper插件的问题，在内网环境就会出现每循环完一个整体都会卡顿一下，无缝滚动失效，最后排查出来是是受水球图影响。。。

（3）下周换个插件试试

tip：这类无缝滚动，大多实现方法是克隆dom，所以在多次调用初始化方法后，由于clone的dom未移除，滚动速度会越来越快。查询到解决方式是每次初始化之前，替换dom，这样直接覆盖了clone的dom，再次调用速度就不会叠加啦。

2、散点折线结合图双x轴：尝试类目轴和值轴数据对齐（no）

给散点图用的值轴设置最大值和最小值，分别为类目轴数据的最后一项和第一项。展示过程中发现tooltip出现会出现两条线，说明双x轴并未对齐。想想也是，类目轴的每一项是一个块状区域，label处于块状区域的中间位置，而值轴是一条线，这样来说，第一个点位就已经对不上了。（我当时在和师傅胡说八道什么，幸好他理解了我的意思🤦‍♀️）

前端开发第80天——一周总结