526互联

短视频直播系统，scroll-view 实现自动滚动到最底部

发布时间 2023-08-30 14:13:38作者: 云豹科技-苏凌霄

短视频直播系统，scroll-view 实现自动滚动到最底部

在滚动视图组件内再加一层view视图，布局改动后，源代码如下

 


<template>
<view>
<scroll-view class="scroll-view" :style="{height:scrollViewHeight+'px'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
<view id="scroll-view-content">
<block v-for="(item,index) in images" :key="index">
<image class="item" :src="item.src" mode="aspectFill"></image>
</block>
</view>
</scroll-view>
</view>
</template>
<script>
//此处省略...
</script>
 

​

还有，实现滚动底部的处理方法scrollToBottom()，代码如下

 


export default {
data() {
return {
images:[],
scrollTop:0,//滚动条位置
scrollViewHeight:300,//滚动视图的高度
//...
};
},
mounted() {
let i = 10;
do{
this.images.push({
src:'../../static/test.jpg',
//...
});
i--;
}while(i>0);
},
//...
methods:{
scrollToBottom(){
this.$nextTick(()=>{
uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res)=>{
let top = res.height-this.scrollViewHeight;
if(top>0){
this.scrollTop=top;
}
}).exec()
})
}
}
}

 

 以上就是 短视频直播系统，scroll-view 实现自动滚动到最底部，更多内容欢迎关注之后的文章