vue uniapp v-html跑马灯

// 通知组件的布局

<view class="notice">
    <view class="notice-left"></view>
    <view class="notice-right">
        <view class="notice-right-content" :style="{left: -left + 'px'}" id="noticeRightContent">
            <text class="notice-right-list" v-for="(item, index) of marquee_list" :key="index" v-html="item.content"></text>
        </view>
    </view>
</view>

// 数据初始化

{
    left: 0,
    marquee_list: [
        {
            "id": 2,
            "content": "<span style=\"background-color: rgb(255, 0, 0);\">1222323</span>"
        },
        {
            "id": 1,
            "content": "<a href=\"https://www.baidu.com\" target=\"_blank\">2222</a> <b><i><a>1111</a> </i></b> <span style=\"color: rgb(255, 0, 0);\">2222 </span>"
        }
    ]
}

// 通知滚动的逻辑
setTimeout(() => {
    let noticeRightContent = uni.createSelectorQuery().select("#noticeRightContent");
    noticeRightContent.boundingClientRect((data) => {
        setInterval(() => {
            this.left += 1;
            if(this.left > parseInt(data.width + 300)) {
                this.left = -560;
            }
        }, 5);
    }).exec();
}, 1000);

// 通知组件的样式

.notice {
    display: flex;
    margin: 50rpx auto;
    width: 600rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #000;
    color: blue;
    overflow: hidden;
}

.notice-left {
    position: relative;
    z-index: 2;
    width: 40rpx;
    height: 80rpx;
    background: red;
}

.notice-right {
    width: 560rpx;
    position: relative;
}

.notice-right-content {
    padding-left: 10rpx;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    white-space: nowrap;
    display: flex;
}

.notice-right-list {
    margin-left: 300rpx;
    font-size: 26rpx !important;
}