uniapp小程序实现内容自适应并向上滚动弹幕

项目：小程序

需求：向上滚动每条不同长度数据，必须流畅一条一条滚动

以下是实现的一个dom组件

实现效果：

 注：内容都会一条一条滚动完，不会因为内容少滚动完，而内容多则卡在一半，且每条都自适应高度，

附组件代码：

<template>
	<view class="">
		<view class="Dynamic_text">
			<scroll-view class="ul" :scroll-y="controlScroll" :style="{height:scrllHight+' !important'}"
				:scroll-into-view="lastItemView" scroll-with-animation @touchstart="onTouchStart"
				@touchend="onTouchEnd">
				<view class="li" v-for="(item,idx) in dataList" :key='idx' @click.stop='obtainList(item,idx)'
					:id="'gift'+idx" style="">
					<!-- 头像 -->
					<view style="margin:0rpx 10rpx 0 0;">
						<image class="headimgs" v-if="item.type==0" :src="item.avatar||'../../../static/logo.png'"
							mode=""></image>
						<image class="headimgs" v-if="item.type==1" src="../../../static/logo.png" mode="">
						</image>
					</view>
					<!-- 内容 -->
					<view>
						<text class="sname">{{item.content||''}}</text>
					</view>
				</view>
			</scroll-view>
			<!-- 底部蒙层 -->
			<view class="bottomMack" v-if="dataList.length>4&&bottomMack" style="align-content:center;"><text
					class="margin-l-20"></text></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 轮播滚动内容
			data: {
				type: Array,
				default: [
					{
						type: 0,
						avatar: require('../../../static/logo.png'),
						content: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
					},
					{
						type: 0,
						avatar: require('../../../static/logo.png'),
						content: '测试测试测试测试测试',
					},
					{
						type: 0,
						avatar: require('../../../static/logo.png'),
						content: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
					},
					{
						type: 0,
						avatar: require('../../../static/logo.png'),
						content: '测试测试测试测试测试',
					},
					{
						type: 0,
						avatar: require('../../../static/logo.png'),
						content: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
					},
					{
						type: 0,
						avatar: require('../../../static/logo.png'),
						content: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
					},
				]
			},
			// 是否显示底部蒙层
			bottomMack:{
				type:Boolean,
				default:true,
			},
		},
		data() {
			return {
				controlScroll: true,
				scrllHight: 'auto',
				lastItemView: null,
				scrollTimeTask: null,
				// 获取动态数据
				dataList: [],
			}
		},
		created() {

		},
		onHide() {
			if (this.scrollTimeTask) {
				clearInterval(this.scrollTimeTask)
			}
		},
		mounted() {
			this.dataList=this.data
			this.autoScrollset()
		},
		methods: {
			// 点击列表
			obtainList(item,idx){
				this.$emit('obtainList',item)
				console.log(item,idx);
			},
			
			//触摸开始停止自动滚动
			onTouchStart() {
				// 关闭动态滚动
				this.controlScroll = false
				if (this.scrollTimeTask) {
					clearInterval(this.scrollTimeTask)
				}
			},
			//触摸结束后重新开启自动轮播
			onTouchEnd() {
				// 开启动态滚动
				setTimeout(() => {
					this.controlScroll = true
					this.autoScrollset()
				}, 2000)

			},

			//自动滚送礼、留言列表
			autoScrollset() {
				let idx = 0
				if (this.scrollTimeTask) {
					clearInterval(this.scrollTimeTask)
				}
				if (this.dataList.length >= 4) {

					this.scrllHight = 560 + 'rpx'

					this.scrollTimeTask = setInterval(() => {
						let pos = idx % this.dataList.length
						let target = this.dataList[pos]
						this.lastItemView = `gift${idx}`
						this.dataList.push(target)
						// console.log(idx++,"=============");
						idx++
					}, 2000)
				}
			},




		},

	}
</script>

<style lang="scss" scoped>
	.Dynamic_text {
		position: relative;
		.ul {
			height: 250px;
			overflow: hidden;

			.li {
				padding: 40rpx 0rpx 40rpx;
				// background: #FFFFFF;
				// box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
				background: rgba(0, 0, 0, 0.5);
				opacity: 1;
				border-radius: 6px;
				overflow: hidden;
				margin-bottom: 20rpx;
				line-height: 48rpx;
				padding: 16rpx 20rpx 10rpx 20rpx;
				display: flex;
				justify-content: flex-start;
				align-content: center;
				color: #fff;

				.headimgs {
					width: 50rpx;
					height: 50rpx;
					display: inline-block;
					margin-bottom: -18rpx;
					margin-right: 20rpx;
					border-radius: 50%;
					margin-bottom: -12rpx;
					margin-right: 0;
				}

				.sname {
					font-size: 26rpx;
					font-weight: 600;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.funeral {
		margin-bottom: auto;
	}

	.bottomMack {
		position: absolute;
		width: 100%;
		bottom: 0;
		height: 70px;
		z-index: 0;
		background-image: linear-gradient(to top, #ffffff, transparent);
		display: flex;
		align-items: center;
		color: #fff;
		// 点击穿透
		pointer-events: none;
	}
</style>

在网上找了很多但是没有找到符合需求的，所以自己动手写了一个，

注意：以上需求功能虽然实现，但是因为使用的是scroll-view+scroll-into-view属性实现，进入页面，当计时器打开时会一直更新dom,在页面待时间久了会卡，

以上是为应急需求实现的功能，如果哪位大佬有更好的解决方案还请多多指教