MiniScm/components/roll-text/roll-text.vue

<template>
   <view class="u-notice">
    <view class="u-notice__content">
        <view class="u-notice__content__text" ref="u-notice__content__text" :style="[animationStyle]">
				<view
					v-for="(item, index) in innerText"
					:key="index"
					:style="[textStyle]"
				>{{item}}</view>
			</view>
    </view>
   </view>
</template>

<script>
import props from './props.js';
    export default {
        mixins: [props],
        computed: {
            animationStyle() {
				let style = {}
				style.animationDuration = this.animationDuration
				style.animationPlayState = this.animationPlayState
				return style
			},
            // 文字内容的样式
			textStyle() {
				let style = {}
				style.color = this.color
				style.fontSize = this.fontSize + "px"
				return style
			},
            innerText() {
				let result = [],
					// 每组text标签的字符长度
					len = 20
				const textArr = this.text.split('')
				for (let i = 0; i < textArr.length; i += len) {
					// 对拆分的后的text进行slice分割，得到的为数组再进行join拼接为字符串
					result.push(textArr.slice(i, i + len).join(''))
				}
				return result
			}
        },
		mounted() {
			// this.vue()
		},
		methods: {
			async vue() {
				let boxWidth = 0,
					textWidth = 0
				console.log("this", this);

				// 进行一定的延时
				await new Promise((resolve) => {
					setTimeout(() => {
						resolve()
					}, 30)
				})

				// 查询盒子和文字的宽度
				textWidth = (await this.$uGetRect('.u-notice__content__text')).width
				boxWidth = (await this.$uGetRect('.u-notice__content')).width
				console.log("textWidth", textWidth, "boxWidth", boxWidth);
				// 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
				// 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
				this.animationDuration = `${textWidth / this.speed}s`
				console.log("this.$uGetRect('.u-notice__content__text')", await this.$uGetRect('.u-notice__content__text', true));
				// 这里必须这样开始动画，否则在APP上动画速度不会改变
				this.animationPlayState = 'paused'
				setTimeout(() => {
					this.animationPlayState = 'running'
				}, 10)
			}
		}
    }
</script>

<style lang="scss" scoped>
.u-notice {
		display: flex;
		width: 460rpx;
		align-items: center;

		&__content {
			text-align: right;
			flex: 1;
			display: flex;
			flex-wrap: nowrap;
			overflow: hidden;

			&__text {
				font-size: 14px;
				padding-left: 100%;
				word-break: keep-all;
				white-space: nowrap;
				animation: u-loop-animation 5s linear infinite both;
				display: flex;
                flex-direction: row;
			}
		}

	}

	@keyframes u-loop-animation {
		0% {
			transform: translate3d(-440rpx, 0, 0);
		}

		100% {
			transform: translate3d(-60%, 0, 0);
		}
	}
</style>