发布的弹幕至于最底部
<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>