开始

image.png
每个list都加这个属性
image.png

  1. loadtext:'上拉加载更多',

拿到上拉加载更多。
image.png

  1. <!-- 上拉加载 -->
  2.                         <view class="load-more">
  3.                             {{item.loadtext}}
  4.                         </view>

image.png

  1. <style>
  2.     .load-more{
  3.         text-align: center;
  4.         color: #AAAAAA;
  5.         padding: 10upx;
  6.     }
  7. </style>

image.png

image.png

  1. .load-more{
  2.         text-align: center;
  3.         color: #AAAAAA;
  4.         padding: 15upx;
  5.     }

触底事件-上拉加载

image.png

  1. <scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">

先把上拉加载的文字给改了、有几种状态。
image.png

  1. loadmore(index) {
  2.                 this.newslist[index].loadtext="上拉加载更多";
  3.                 this.newslist[index].loadtext="加载中...";
  4.                 this.newslist[index].loadtext="没有更多数据了";
  5.             }

如果正在加载数据就直接返回
image.png

image.png
image.png
复制一份数据过来。注意setTimeout这里用的是箭头函数，用了箭头函数里面才可以用this这个对象。
image.png
image.png
把数据追加到数组里面
image.png
拉到底部
image.png
刷新到一条数据后，再拉到底部。一直加载中
image.png
下拉和上拉的时候，有这样弧度的效果。
image.png
如果不喜欢这个样式的话。
image.png

image.png

触底事件不触发的问题

uniapp scroll-view 触底事件scrolltolower不执行？

https://ask.dcloud.net.cn/question/79911

https://ask.dcloud.net.cn/question/89385

scroll-view这里设置高度100% 就触发了。
image.png
偶尔触发，偶尔不触发这个事件

uni-app中scroll-view不触发@scrolltolower事件（某些机型）
https://blog.csdn.net/weixin_44357065/article/details/121182206

https://blog.csdn.net/weixin_46533954/article/details/123426496?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.pc_relevant_default&utm_relevant_index=3

最终解决

参考了下面的文章
https://blog.csdn.net/weixin_44097578/article/details/105263532?spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-11.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-11.pc_relevant_default&utm_relevant_index=11

因为我们在onLoad的时候计算了swiper的高度并赋值
image.png
这样相当于在页面一加载就默认滚动到了最下面，然后触发一次触底事件进行了加载。
image.png

image.png

最最终解决方法

设置一个变量，默认滚动条高度为0
image.png
image.png
滚动条事件，随着滚动条的滚动触发scroll事件，然后给scroll-view的滚动条高度赋值。这样就解决了第一次必须要上拉刷新一次的问题。并且默认会显示在第一条数据的位置
image.png

结束