关于scroll-view 实现区域滚动 及scroll-top不生效的问题

简书地址-----------------------------简书地址------------------------
分享这个主要是遇到两个坑
1.上下滚动因为高度的问题，scrollView没有填满所剩下的空间，没有实现区域滚动

1. scroll-top 不生效的问题 ，比如想滚动到底部
   在用这个标签之前，很多地方需要阅读官方文档比如这句话 ：用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height。
   我的第二个问题就是因为没有设置高度导致 scroll-top不生效，但是设置高度百分之百又满足不了区域滚动，设置百分之分有时还会错位
   好了不比比，直接上代码，建议全部复制过去

   <template>  
   <view class="content flex-column">  
       <view class="top-view flex-center" @tap="clickEvnet(0)">  
           点击我实现滚动到顶部  
       </view>  
       <view class="scroll-view flex-1">  
           <scroll-view :scroll-y="true" :scroll-top="scrollTop" :style="{'height':scrollViewH}" scroll-with-animation="true">  
               <block v-for="(item,index) in list" :key="index">  
                   <view class="item-view">  
                       {{item}}  
                   </view>  
               </block>  
           </scroll-view>  
       </view>  
       <view class="bottom-view flex-center" @tap="clickEvnet(1)">  
           点击我实现滚动到底部  
       </view>  
   </view>  
   </template>

   <script>  
   export default {  
       data() {  
           return {  
               scrollViewH: "",  
               scrollTop: 0,  
               list: []  
           }  
       },  
       onLoad(options) {  
           let that = this;  
           for (var i = 0; i < 100; i++) {  
               that.list.push("滚动列表内容" + i)  
           }  
       },  
       mounted() {  
           let that = this;  
           const query = uni.createSelectorQuery().in(this);  
           query.select('.scroll-view').boundingClientRect();  
           query.exec(res => {  
               const scrollViewH = res[0].height;  
               console.log("scrollViewH==" + scrollViewH)  
               that.scrollViewH = scrollViewH + "px"  
           });  
       },  
       methods: {  
           clickEvnet(type) {  
               let that = this;  
               that.goToBottom(type == 0 ? 0 : 99999)  
           },  
           // 容器滚动到底部  
           goToBottom(scrollTop) {  
               let that = this  
               that.scrollTop = scrollTop + Math.random() * 10  
           },  
       }  
   }  
   </script>

   <style>  
   .content {  
       height: 100%;  
   }  
   
   .flex-column {  
       display: flex;  
       flex-direction: column;  
   }  
   .flex-center{  
       align-items:center;  
       justify-content:center;  
   }  
   .flex-1 {  
       flex: 1;  
   }  
   
   .scroll-view {  
       background-color: red;  
       overflow: hidden;  
   }  
   
   .top-view,  
   .bottom-view {  
       background-color: #0081FF;  
       height: 50px;  
       color: #fff;  
       font-size: 18px;  
   }  
   
   .item-view {  
       color: #333333;  
       padding: 10px;  
       border-bottom: 1px solid #888888;  
   }  
   </style>