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

vue2模板版本

<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}` // 这里必须定一个变量数字idx长度，不能直接在模板字符串里面写dataList.value.length - 1，亲测无效，可以把dataList.value.length - 1赋值给最上面的变量值，然后把idx传进去，亲测可行。
					this.dataList.push(target)
					idx++  // 这里我用的是idx++，如果不是用的这个，而是获取数组长度-1，那么建议在数组push之后加个setTimeOut做个延时，不然获取不到最新的数组长度，导致不能滚动，本人碰到的坑
				}, 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>

vue3模板版本

<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 setup>
	import {
		ref,
		onMounted
	} from 'vue';
	const lastItemView = ref(null)
	const scrollTimeTask = ref(null)
	const dataList = ref([''])
	const autoScrollset = () => {
		let idx = 0
		if (scrollTimeTask.value) {
			clearInterval(scrollTimeTask.value)
			scrollTimeTask.value = null
		}
		scrollTimeTask.value = setInterval(() => {
			let target = '列表' + idx
			lastItemView.value = `gift${idx}`  // 这里必须定一个变量数字idx长度，不能直接在模板字符串里面写dataList.value.length - 1，亲测无效，可以把dataList.value.length - 1赋值给最上面的变量值，然后把idx传进去，亲测可行。
			dataList.value.push(target)
			idx++
		}, 500)
	}

	onMounted(() => {
		autoScrollset()
	})
</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>