uniapp实现直播评论向上滚动效果

<template>
	<view class="">
		<view class="Dynamic_text">
			<!-- scroll-into-view:可以根据id自动滚动到某个元素的位置 -->
			<!-- scroll-with-animation: 在滚动到指定位置时，添加滚动动画效果。 -->
			<!-- scroll-y: 开启滚动 -->
			<scroll-view class="ul" scroll-y :scroll-into-view="lastItemView" scroll-with-animation>
				<view v-for="(item,idx) in dataList" :key='idx' :id="'gift'+idx" style="">
					<view class="li" v-if="item!=''">
						<text class="sname">{{item}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lastItemView: null,
				scrollTimeTask: null,
				// 获取动态数据(这里必须要给一个初始值,不然后面滚动不了,具体原因未知,本人在页面代码里面做了判断空字符串不显示)
				dataList: [''],
			}
		},
		created() {

		},
		onHide() {
			if (this.scrollTimeTask) {
				clearInterval(this.scrollTimeTask)
				this.scrollTimeTask = null
			}
		},
		mounted() {
			this.autoScrollset()
		},
		methods: {
			//自动滚送礼、留言列表
			autoScrollset() {
				let idx = 0
				if (this.scrollTimeTask) {
					clearInterval(this.scrollTimeTask)
					this.scrollTimeTask = null
				}
				this.scrollTimeTask = setInterval(() => {
					let target = '列表' + idx
					this.lastItemView = `gift${idx}`
					this.dataList.push(target)
					idx++
				}, 500)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.Dynamic_text {
		.ul {
			height: 500px;
			.li {
				padding: 40rpx 0rpx 40rpx;
				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;
			}
		}
	}
</style>