|
@@ -1,114 +0,0 @@
|
|
|
-<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>
|