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

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

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

 

1

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

​

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

 

1

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

 

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