Javascript 如何编写高性能无缝滚动插件？ 导出默认值{ 道具：{ 数据：{ 默认值：[]， 类型：数组 } }, 安装的（）{ 这是无接缝的卷({ pd:40， 网格宽度：556 }); }, 方法：{ seamlessScroll（选项={}）{ 让de

如何编写高性能无缝滚动插件？

导出默认值{
道具：{
数据：{
默认值：[]，
类型：数组
}
},
安装的（）{
这是无接缝的卷({
pd:40，
网格宽度：556
});
},
方法：{
seamlessScroll（选项={}）{
让defaultConfig={
pd:20，
gridWidth:null，
xCache:0
};
options=Object.assign（defaultConfig，options）；
设el=this.$refs.group.querySelector（“ul”）；
让parentContainerWidth=0；
让imgContainers=el.queryselectoral（“li”）；
let count=imgContainers.length；
如果（！options.gridWidth）{
for（设i=0；i<pre>
<code>
    <template>
        <div class="seamless-group" ref="group">
            <ul>
                <li v-for="item in data" :key="item._id">
                    <img :src="item.pic" />
                </li>
            </ul>
        </div>
    </template>
    <script>
    export default {
        props: {
            data: {
                default: [],
                type: Array
            }
        },
        mounted() {
            this.seamlessScroll({
                pd: 40,
                gridWidth: 556
            });
        },
        methods: {
            seamlessScroll(options = {}) {
                let defaultConfig = {
                    pd: 20,
                    gridWidth: null,
                    xCache: 0
                };
                options = Object.assign(defaultConfig,options);
                let el = this.$refs.group.querySelector("ul");
                let parentContainerWidth = 0;
                let imgContainers = el.querySelectorAll("li");
                let count = imgContainers.length;
                if(!options.gridWidth) {
                    for(let i = 0; i < count ; i++) {
                        parentContainerWidth += imgContainers[i].getBoundingClientRect().width;
                        el.insertAdjacentElement("beforeend",imgContainers[i].cloneNode(true));
                    }
                }else {
                    for(let i = 0; i < count ; i++) {
                        parentContainerWidth += options.gridWidth;
                        el.insertAdjacentElement("beforeend",imgContainers[i].cloneNode(true));
                    }
                }
                parentContainerWidth = parentContainerWidth + count * options.pd;
                console.log(parentContainerWidth);
                options.xCache = el.querySelector("li:first-child").offsetLeft;
                let fz_left = parentContainerWidth * -1;
                scroll();
                function scroll() {
                    if(options.xCache <= fz_left) {
                        options.xCache = 0;
                    }
                    options.xCache -= 1;
                    el.style.transform = "translateX(" + options.xCache.toString() + "px)";
                    window.requestAnimationFrame(scroll);
                }
            }
        }
    }
    </script>

    <style lang="less">
        .seamless-group {
            position: relative;
            overflow: hidden;
            ul {
                list-style: none;
                padding: 0;
                display: flex;
                li {
                    width: 556px;
                    margin-right: 40px;
                }           
            }
        }
    </style>

</code>