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; }