初级前端开发一周总结

一、这一周都干了啥

项目消缺 + 切图（总体来说还是在调样式）：不熟练＋时间长

二、需求记录

1、点击按钮后使内容自动滚动至最右边

使用jQuery中的animate效果，处理scrollLeft的距离为：内容宽度 - 容器宽度。如果被打断（如再次点击按钮）可以用finish函数移除动画效果
最开始用的是translateX来做，但是内容平移后，容器滚动条未一致改变，导致动画后无法正常滚动查看内容。并且translateX(100%)会让内容完全移除可视区域。并且最开始用原生js操作dom的，好麻烦。

    <div class="box">
        <div class="container">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
        </div>
    </div>
    <button class="next">lll</button>

    var container = $('.box');
    var content = $('.container');
    $('button').click(function () {
        var maxScroll = content.width() - container.width();
        container.animate({ 'scrollLeft': maxScroll }, 1000，{
            container.finish();
        });
    });

    .box {
        width: 300px;
        height: 300px;
        overflow: auto;
    }

    .container {
        width: max-content;
        height: auto;
        display: flex;
    }

    p {
        width: 90px;
        height: 100%;
        border: 1px dashed pink;
    }

折磨了很久，又没什么好写的，只能说第一次做，并且不熟悉jQuery。

2、echarts x轴label展示图片

axisLabel配置中，使用rich的backgroundColor，然后在formatter中返回即可

rich: {
    a: {
        backgroundColor: {
            image: url
        }
    }
}

3、ivew tab组件为label添加标签，可使用ivew提供的render函数实现。

将label属性由文字替换成函数：以下用tabRender为例，为label修改为一个span标签，内容为text。 render函数格式和使用方法还需学习。

tabRender: function(text) {
    return function(temp) {
        return temp('span', text);
    }
}