mpvue中小程序的scroll-view组件和全局配置的上拉加载，下拉刷新的区别

最新推荐文章于 2024-08-20 08:52:10 发布

bumbleePlu

最新推荐文章于 2024-08-20 08:52:10 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/qq_20074443/article/details/87938816

版权

小程序的scroll-view组件和全局配置的上拉加载，下拉刷新的区别

在写订单列表的时候，有一个需求是上拉加载更多，下拉刷新页面，一开始选的是小程序的scroll-view组件，写完之后发现问题蛮多的，查了很多文档，后来重写了一遍，换成了全局的方法，下面我就说一下这两种方式的用法和感受吧！

scoll-view

用法

使用scroll-view时需要给它一个固定的高度,添加上拉、加载事件，中间部分就是内容，scroll-view相当于一个容器。

<scroll-view
  scroll-y
  style="height: 200px;"
  @scrolltoupper="upper"
  @scrolltolower="lower"
  @scroll="scroll"
  scroll-into-view="{{toView}}"
  scroll-top="{{scrollTop}}"
>
  <div class="order_one" v-for="(item, index) in orderLists" :key="index">
      ...
  </div>
</scroll-view>

注意:

由于使用的是mppvue框架搭建的小程序，其中的事件需要写在methods中，小程序组件中的事件都需要去掉bind，替换成@符号，反之则不会触发

缺陷

1.没有上拉加载和下拉刷新的动画，需要自己手动去实现

2.滚动条在最顶部时，下拉刷新无法被触发，需要先上拉出一段距离，才能触发下拉刷新事件，这也是最后放弃scroll-view的主要原因

全局配置的方法

用法

1.在app.json中写入下面配置

{
 "enablePullDownRefresh": true,
 "backgroundTextStyle":"dark",
 "onReachBottomDistance":50,
}

2.在对应的页面中（.vue后缀）写入方法，这两个方法应该与methods平级,否则无法触发

// 下拉刷新
   onPullDownRefresh () {
     this.orderLists.length = 0
     this.loadingOrderLists()
     // 停止下拉刷新
     wx.stopPullDownRefresh()
   },
   // 上拉加载
   onReachBottom () {
     console.log('bottom')
     if (this.remainListsLength > 0) {
       this.params.page++
       this.loadingOrderLists()
       this.scrollStatus = true
     } else {
       this.scrollStatus = false
     }
   }

注意：

1.scroll-view和全局配制方法最好不要同时使用，将不会触发scroll-view
解决方法：当两者同时存在时，改scroll-view为view，改bindscrolltolower为onReachBottom函数。这样在上拉加载，跟下拉刷新同时存在的时候，“enablePullDownRefresh”:true就可以生效了。

2.如果只想某个页面配置下拉刷新，只需要在对应的页面新建一个main.json文件，然后将之前的app.json中配置写入main.json文件中即可。