uniapp弹幕滚动到底部

最新推荐文章于 2024-05-29 19:40:53 发布

@小朱呀路

最新推荐文章于 2024-05-29 19:40:53 发布

阅读量442

点赞数 1

分类专栏： uniapp 文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_45441173/article/details/128753184

版权

uniapp 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

发布的弹幕至于最底部

在这里插入图片描述

<template>
	<view class="" style="position: fixed;bottom: 120rpx;left:0;rigth:0;background-color: #000;">
		<!-- scroll-with-animation 在设置滚动条位置时使用动画过渡 
			scroll-into-view值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 
			在scroll-view添加scroll-into-view属性  在他的子元素添加id  这个属性和id一致就会滚动到该元素
		-->
		<scroll-view class="pl-3" scroll-y="true" style="width:520rpx;height: 300rpx;;"
			:scroll-into-view="scrollIntoView" scroll-with-animation :show-scrollbar="false" >
			<view :id="'danmu'+item.id" v-for="item in list" :key="item.id"
				class="mt-1  flex  justify-start  align-start p-2" style="background-color: rgba(255,255 ,255, 0.5);">
				<text class="text-danger font-md">{{item.name}}</text>
				<text class="text-danger font-md">{{item.content}}</text>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollIntoView: '',
				list: []
			}
		},
		mounted() {
			let id = 1;
			setInterval(() => {
				this.list.push({
					id: id,
					name: '昵称' + id,
					content: '内容 ' + id
				})
				this.bottom();
				id++
			}, 1000)

		},
		onLoad() {

		},
		methods: {
			bottom() {
				setTimeout(() => {
					let len = this.list.length;
					if (len > 0 && this.list[len - 1]) {
						this.scrollIntoView = 'danmu' + this.list[len - 1].id
					}
				}, 200)
			}

		}
	}
</script>

<style>
	.mt-1 {
		margin-top: 10rpx;
	}

	.rounded {
		border-radius: 8rpx;
	}

	.pl-3 {
		padding-left: 30rpx;
	}

	.p-2 {
		padding: 20rpx;
	}

	.text-white {
		color: #ffffff;
	}

	.text-danger {
		color: #dc3545;
	}

	.font-md {
		font-size: 35rpx !important;
	}

	.flex {
		/* #ifndef APP-PLUS-NVUE */
		display: flex !important;
		/* #endif */
		flex-direction: row;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.align-start {
		align-items: flex-start;
	}
</style>