文字超出滚动 uni-app组件

一、预览图

文字超出滚动.gif

二、实现的点

1.文字超出父元素宽度，自动滚动
2.文字不超出父元素宽度，不滚动
3.自动计算滚动时间，控制滚动速度
4.兼容H5、小程序

三、实现代码

components/textScroll/index.vue 组件代码如下：

<template>
    <div class="tip">
        <div class="inner" :class="{'move': scroll}" :style="styleName">
            <text class="tip-inder">{{text}} {{scroll ? text : '' }}</text>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            text: {
                type: String,
                defualt: ''
            },
        },
        data() {
            return {
                styleName: "animation-duration: 6s",
                scroll: false,
                tipWidth: 0
            };
        },
        watch: {
            text: {
                handler(val) {
                    this.textScroll()
                },
                immediate: false
            }
        },
        methods: {
            textScroll() {
                // 等待节点挂载后再执行,热门线路tip滚动实现
                this.$nextTick(() => {
                    let query = wx.createSelectorQuery().in(this)
                    query.select('.tip').boundingClientRect(data => {
                        this.tipWidth = data.width
                        console.log('tip', this.tipWidth)
                    }).exec();
                    query.select('.tip-inder').boundingClientRect(data => {
                        console.log('tip-inder', data.width)
                        if(data.width > this.tipWidth) {
                            let w = Number(data.width)
                            let time = Math.round(w / 40)
                            this.styleName = `animation-duration: ${time}s`
                            this.scroll = true
                        }
                    }).exec();
                })
            }
        }
    };
</script>

<style lang="less">
    .tip {
        width: 100%;
        background: #f6f9ff;
        color: #4d82ff;
        font-size: 28rpx;
        height: 80rpx;
        line-height: 80rpx;
        overflow: hidden;
        box-sizing: border-box;
        white-space: nowrap;
    }
    
    .tip .inner {
        overflow: hidden;
        display: inline-block;
    }

    .tip .inner .tip-inder {
        white-space: nowrap;
        padding-left: 30rpx;
    }

    .tip .inner.move {
        // animation: move 6s infinite linear;
        animation-name: scroll;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }
</style>

四、使用教程

• vue页面使用

<template>
    <text-scroll :text="boardRemark"></text-scroll>
</template>

import textScroll from '@/components/textScroll/index.vue'
export default {
    components: { textscroll },
    data() {
        return {
                boardRemark: '很长很长很长很长很长很长很长很长很长很长很长很长的文字'
      }
   }
}