复制代码做网站高端网站建设企业

情景描述：

最近在uniapp项目中用到scroll-view内置组件，有需求是在页面下拉刷新后，让scroll-view组件区域的显示内容置顶，也就是scroll-view区域的内容恢复不滑动的状态；

补充：下拉刷新操作scroll-view组件中的数据时，并不会让scroll-view的卷起状态重置；

为实现上面需求；第一时间反应就是给scroll-view组件绑定scroll-top（scroll-left）属性，页面在下拉刷新后，控制scroll-top(scroll-left)为零即可。

相关代码片段如下：

模板<scroll-view class="table-body" scroll-y="true" :scroll-top="scrollToTop"><view class="body-tr" v-for="item in temp"><text style="width: 35%;">{{item.name}}</text><text style="width: 20%;">{{item.laneNum}}</text><text style="width: 30%;">{{item.deviceName}</text><text style="width: 15%;">{{item.trafficFlow}}</text></view></scroll-view>scriptdata() {return {scrollToTop: 0,}}
下拉刷新onPullDownRefresh(){this.scrollToTop= 0;}

当下拉刷新时，让scrollToTop值置0，从而恢复scroll-view的卷起状态。
但是实际效果却并没有按当前思路来，先滚动scroll-view区域，再进行下拉刷新后，scroll-view的卷起状态依然是下拉刷新前的状态。

踩坑调查处理：

1.为调查上面的思路实现失效问题，在过程中发现，scroll-view组件的scroll-top（scroll-left）属性的属性值并不是双向绑定的，其区域内容滑动时，scroll-top（scroll-left）属性的属性值scrollToTop并不会发生变化始终是，你给定的值0；

2.思路是没有问题，为了验证scroll-top属性的用法是否有误，我将scroll-top的初始值设置了50，发现页面初始后，scroll-view区域页面的卷起高度发生了变化，说明scroll-top属性值的用法是没有问题；

3.接第2步，我将在页面初始化后scroll-view区域发生滚动变化的情况下，我再滚动scroll-view区域，然后进行下拉刷新 执行 this.scrollToTop= 0；这次页面刷新后，scroll-view区域的滚动状态，居然按照原思路给重置了；

4.为了找到第3步成功的原因与最处不成功的情况有什么不同，我在第3步的执行状态下（页面下拉刷新后，scroll-view区域恢复初始的状态）又进行了一次，滑动scroll-view区域，并之后再下拉刷新页面 执行 this.scrollToTop= 0；这一次结果又有不同；页面刷新后，scroll-view区域的滚动状态 又没有刷新；

5.做出多次测试后发现，当给scrollToTop设置初始值为0时，后续再通过下拉刷新给scrollToTop 重新赋值为0时，scroll-view区域的滚动状态 始终不会初始化；当给scrollToTop设置初始值不为0时，当后续再给scrollToTop = 0 时，会保证第一次下拉刷新的 scrollToTop = 0 （置0）有效果，第一次之后的下拉刷新 scrollToTop 置0 就没有效果了；

6.最后在第5步基础上，在每次下拉刷新时都打印scrollToTop 值，发现 每次scroll-view区域滚动后scrollToTop的值都是默认设置的值，并不会发生变化，也就是第1步的结论；并且推断 出现第5步结果的原因：在 给scrollToTop = 0 ,也就是初始化scroll-view区域的滚动状态时，只有当scrollToTop的值 不等于0 时，或者说 scrollToTop置0前 scrollToTop的就不能是0的情况下，此次赋值后才有效果 。

此处 scrollToTop的置0效果，就好比是 vue中的监听器，只有在scrollToTop的值前后发生变化时，页面才会做出对应相应，这样的机制应该也是为了考虑页面的渲染性能。

原因总结：

结合上面第1步，第5步，第6步，导致页面下拉刷新后scroll-view组件区域滚动状态没有恢复初始化的原因：
1.scroll-top属性值 scrollToTop的初始值为0时，每次下拉刷新后scrollToTop置0都没有效果的情况：

scrollToTop的值，在scroll-view组件区域滚动时，始终是0，在下拉刷新对 scrollToTop 再一次赋值0时，scrollToTop前后的值没有发生变化，所以就不会出现 scroll-view区域的滚动状态重置成初始化状态。

2.scroll-top属性值 scrollToTop的初始值为50时，第一次下拉刷新后scrollToTop置0有效果，第一次之后续scrollToTop置0 就没有效果 的情况：

这种情况下，scrollToTop的初始值为50，不等于0；在第一次scrollToTop置0后，会监测到scrollToTop的值变化，从而scroll-view区域页面发生更新， scroll-view区域的滚动状态重置成初始化状态，从第二次开始，scrollToTop为0，当后续再次置0时，就重复了上面第一种情况。

解决问题思路：

通过原因分析知道，多次重复的将scrollToTop置0，在scrollToTop前后值不变的情况下，对scroll-view组件是没有效果的。

那么就需要满足一种需求就是，既要让scrollToTop值每次都发生变化，并且还能让scroll-view组件区域置顶。

通过尝试，将scrollToTop 的值在0和1之间切换，就能满足需求；当scrollToTop = 0 时，下拉刷新，让scrollToTop = 1，scrollToTop 值发生变化，scroll-view区域页面滚动1像素，几乎看不出来。

最终：

onPullDownRefresh(){this.scrollToTop = this.scrollToTop === 0 ? -1 : 0;
}

最终解决方案采用，将scrollToTop 的值在0和-1之间切换，在每次下拉刷新时，就能保证每次下拉刷新后，绑定 :scroll-top=“scrollToTop” 的scroll-view组件的滚动状态都是初始化的（滚动区域置顶的）。

Tip：

记录uniapp中scroll-view的scroll-top不生效问题的详细解决过程和思路，建议越到相同问题的朋友，可以用一点点时间看完（比较通俗易懂个人感觉），希望对你有所帮助，有问题欢迎评论区交流。