短视频直播系统,scroll-view 实现自动滚动到最底部
短视频直播系统,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 实现自动滚动到最底部,更多内容欢迎关注之后的文章