前端实现文字循环滚动

在vue项目中实现文字内容信息的横向或者竖向自动循环轮播

在vue项目中实现文字内容信息的横向或者竖向自动循环轮播，
在vue项目中引用组件的时候支持
当鼠标移入的时候停止轮播，
传入speed参数控制轮播的速度，
传入contentList参数为轮播展示的内容，
传入isVertical参数改变自动循环的方向（横向或者竖向），
点击每一项内容时（绑定click事件）返回当前项的数据，组件完整的代码如下：

<script>
// 新闻信息横向或者竖向滚动
export default {
    name: 'ui-scroll',
    props: {
        // 速度
        speed: {
            type: Number,
            default: 50
        },
        // 是否竖向滚动
        isVertical: {
            type: Boolean,
            default: true
        },
        // 内容
        contentList: {
            type: Array,
            default: () => []
        }
        // 示例
        // contentList: [
        //     {
        //         value: 'aaaa'
        //     },
        //    {
        //         value: 'bbbbb'
        //     }
        // ]
    },
    data () {
        return {
            timer: null,
            scrollWrap: null,
            scrollStart: null
        }
    },
    mounted() {
        this.start();
    },
    destroyed() {
        clearInterval(this.timer)
    },
    methods: {
        scrollLeft() {
            // 根据父元素的滚动距离是否等于子元素滚动的宽度来实现横向滚动效果
            if( this.scrollWrap.scrollLeft >= this.scrollStart.scrollWidth){
                this.scrollWrap.scrollLeft = 0;
            } else
                this.scrollWrap.scrollLeft++;
        },
        scrollUp() {
            // 根据父元素竖向滚动的距离是否大于 子元素滚动的高度循环来实现滚动效果
            if( this.scrollWrap.scrollTop >= this.scrollStart.scrollHeight){
                this.scrollWrap.scrollTop = 0;
            } else
                this.scrollWrap.scrollTop++;
        },
        // 鼠标移入停止
        stop() {
            clearInterval(this.timer);
        },
        // 继续滚动
        scroll() {
            this.leftOrUp();
        },
        // 初始化
        start() {
            this.scrollWrap = this.$refs.scrollWrap;
            this.scrollStart = this.$refs.scrollStart;
            this.leftOrUp();
        },
        // 判断向上还是向左滚动
        leftOrUp() {
            if (this.isVertical) {
                this.timer = setInterval(this.scrollUp, this.speed);
            } else {
                this.timer = setInterval(this.scrollLeft, this.speed);
            }
        },
        // 点击事件
        textClick(data) {
            this.$emit('click', data)
        }
    },
    render() {
        let contentList = this.contentList.map((item, index) => {
            return <li key={index} class="scroll-wrap-content-item" onClick={() => this.textClick(item)}>
                {item.value}
            </li>
        })
        return <div class={{'scroll-wrap': true, 'scroll-wrap-vertical': this.isVertical}} ref="scrollWrap" onMouseout={this.scroll} onMouseover={this.stop}>
            <ul class="scroll-wrap-content" ref="scrollStart">
                {contentList}
            </ul>
            <ul class="scroll-wrap-content">
                {contentList}
            </ul>
        </div>
    }
}
</script>

<style lang="scss">
$height: 40px;
.scroll-wrap {
    width: 500px;
    height: $height;
    border: 2px solid red;
    border-radius: 10px;
    line-height: $height;
    white-space: nowrap;
    overflow: hidden;
    margin: 0px auto;
    &-content {
        display: inline-block;
        white-space: nowrap;
        &-item {
            display: inline-block;
            margin-right: 10px;
        }
        &-item:hover {
            color: red;
            cursor: pointer;
        }
    }
}
.scroll-wrap-vertical {
    white-space: normal;
    .scroll-wrap-content {
        display: block;
        white-space: nowrap;
        &-item {
            display: block;
        }
    }
}
ul, li {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

</style>

横向和竖向滚动实现效果如下：