在做uniapp项目中，有个滚动视图组件scroll-view，跟微信小程序里的组件一样的，想要实现自动滚动到最底部，是一件容易忽略的，小事情。

文章目录

  • 问题呈现
  • 解决方案
  • 注意事项

问题呈现

官网uniapp文档上说可以控制滚动条，并没有自动滚动到底部的设置选项，请看布局源代码，如下，大多数可能都是这样写的

<template><view><scroll-view class="scroll-view" :style="{height:scrollViewHeight+'px'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true"><block v-for="(item,index) in images" :key="index"><image class="item" :src="item.src" mode="aspectFill"></image></block></scroll-view></view></template><script>export default {data() {return {images:[],scrollTop:0,//滚动条位置scrollViewHeight:300,//滚动视图的高度//...};},//...}</script>

虽然可以控制滚动条位置，但是，不知道滚动视图框内的内容高度，要怎么精准控制滚动条位置呢

解决方案

通过各种尝试，认为最好的方案就是，在滚动视图组件内再加一层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的属性设置

  • 需要设置固定高度,这样视图里面内容当只有超过该高度才会有滚动效果
  • 需要设置scroll-with-animation=true，可以出现慢慢滚动到底部效果