uniapp实现自定义头部文字滚动字幕

uniapp实现自定义头部文字滚动字幕

如图：

HTML ：

<view class="noticeBarBox" v-show="noticeBarShow">
	<view class="NoticeBar">
		<image class="NoticeBarImg1" src="../../static/jifen/[email protected]">image>
		<view style="width: 624rpx;height: 34rpx;overflow: hidden;" id="marquee-box">
			<view class="NoticeBarTextBox" :style="{'left':left+'rpx'}" id="marquee-text">
				<text  v-for="(item,index) in noticeBarList" @click="noticeBarClick(item)" v-html="item.text">{{item.text}}text>
			view>
		view>
		<image class="NoticeBarImg2" src="../../static/jifen/[email protected]" @click="noticeBarClose">image>
	view>
view>

CSS ：

.noticeBarBox{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	.NoticeBar{
		width: 100%;
		height: 66rpx;
		background: #FFFAD4;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 25rpx;
		.NoticeBarImg1{
			width: 28rpx;
			height: 26rpx;
		}
		.NoticeBarImg2{
			width: 22rpx;
			height: 20rpx;
		}
		.NoticeBarTextBox{
			// display: flex;
			// align-items: center;
			// min-width: 624rpx;
			height: 34rpx;
			font-size: 24rpx;
			color: #F66803;
			line-height: 34rpx;
			margin-left: 10rpx;
			margin-right: 18rpx;
			overflow: hidden;
			position: relative;
			display: inline-block;
			white-space: nowrap;
		}
	}
}

JS ：

export default {
	data() {
		return {
			// 头部滚动的内容
			noticeBarList:[],
			// 头部滚动
			noticeBarShow : true,
			// 跑马灯宽度
			maxWidth : 0,
			// 文字宽度
			TextWidth : 0,
			timerId: -1,
			left: 0,
		}
	},
	onShow() {
		let _this = this
		if(this.noticeBarShow==false){
			this.timerId==-1
		}else{
			//if(_this.TextWidth>_this.maxWidth){
				this.play(true)
			//}
		}
	},
	onHide() {
		//this.stop()
	},
	mounted() {  //获取节点信息，最好在mounted之后获取以确保获取到
		let _this = this
		let query = uni.createSelectorQuery().in(this);
		query.select('#marquee-box').boundingClientRect(data => {
			_this.maxWidth = data.width;
			// console.log(_this.maxWidth,'父级宽度')
				
		}).exec();
	},
	methods: {
		// 初始化头部跑马灯
		init(){
			let _this = this;
			let query = uni.createSelectorQuery().in(this);
			this.$nextTick(()=>{
				query.select('#marquee-text').boundingClientRect(data => {
					_this.TextWidth = data.width
					// console.log(_this.TextWidth,'text宽度')
					// if(data.width>_this.maxWidth){
						_this.play(true)
					// }
				}).exec();
			})
		},
		//在页面显示状态时调用
		play(e){
			clearInterval(this.timerId)
			let _this = this;
			if (e || this.timerId==0) {
				_this.timerId = setInterval(()=>{
					// console.log(_this.maxWidth)=
					if ((_this.TextWidth*2)+_this.left<0){
						_this.left=_this.maxWidth*2;
					} 
					_this.left = _this.left-1;
				},10);
			}
		},
		// //在页面隐藏状态时调用，不考虑性能的话，可以不管
		// stop(){
		// 	if (this.timerId>0) {
		// 		clearInterval(this.timerId);
		// 		this.timerId = 0;
		// 	}
		// },
		// 点击头部滚动消息关闭按钮时
		noticeBarClose(){
			this.noticeBarShow = false
			clearInterval(this.timerId)
		},
		// 点击头部滚动消息时
		noticeBarClick(item){
			console.log(item)
		},
		//获取滚动数据     根据后端接口数据自定义处理  仅供参考
		getRollingShow(){
			let _this = this
			app.globalData.request({
				url:'/emp/rollingshow'
			}).then(function(res){
				if(res.data.data.length<=0){
					_this.noticeBarShow = false
					return
				}
				let data = res.data.data
				for (var i = 0; i < data.length; i++) {
					data[i].text = data[i].title + ' : ' + data[i].desc + "                        ";
					data[data.length-1].text = data[i].title + ' : ' + data[i].desc
				}
				_this.noticeBarList = data
				_this.init();  // 很重要，否则拿不到文字称开的宽度
			})
		},
		// 点击头部滚动消息关闭按钮时
		noticeBarClose(){
			this.noticeBarShow = false
		},
	}
}

后端返回数据参考：