前端 - 咨询一个关于uView框架的u-list的触底加载的问题？

Question

咨询一个关于uView框架的u-list的触底加载的问题？
1、页面效果

2、目前使用的情况

<view class="middle_content">            <u-list @scrolltolower="scrolltolower" height="100%" :preLoadScreen="currentPage * 4" v-if="displayShow">                <u-list-item v-if="schoolList.length != 0" v-for="(item,index) in schoolList" :key="index">                    <uni-card>                                            </uni-card>                </u-list-item>            </u-list>            <view class="middle_footer">            </view>        </view>

3、样式

.middle_content {        height: calc(100% - 35%);        margin-top: 38%;        position: relative;        box-sizing: border-box;    }

4、加载更多方法

// 触底加载更多            scrolltolower() {                this.currentPage++                this.getWishInfo()            },

5、偶然出现的问题

目前出现的问题是，在我向上滑动触顶的时候，也会触发scrolltolower事件，请问是什么原因造成的

Answer 1

提供的代码看起来没有问题，是不是有可能因为没办法撑满一屏所以出现了这个问题？

考虑给 scrolltolower 函数增加一个 allLoaded 的判断，如果全部加载完成之后就不再触发。下拉刷新的时候再给 allLoaded 设置 false。

---

Edit

大概找到问题了，preLoadScreen 为啥是 currentPage * 4 ？有什么特别的处理吗，改成 4 不可以吗？
如果需要每次加载多屏的数据，不应该在 getWishInfo 方法中请求数据时设置 pageSize 吗？

Answer 2

你遇到的问题应该是由于u-list组件在检测滚动事件时没有正确区分是向上滚动还是向下滚动。在u-list组件中，通常会使用scrolltolower和scrolltoupper两个事件来分别处理触底和触顶加载。然而，你的代码示例中只使用了scrolltolower事件，这就导致在向上滚动时也会触发加载更多的操作。

要解决这个问题，你可以尝试使用scrolltoupper事件来处理触顶加载的情况。下面是一个修改后的示例代码：

<u-list @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" height="100%" :preLoadScreen="currentPage * 4" v-if="displayShow">    <u-list-item v-if="schoolList.length != 0" v-for="(item,index) in schoolList" :key="index">        <!-- ... -->    </u-list-item></u-list>

// 触顶加载更多scrolltoupper() {    if (this.currentPage > 1) {        this.currentPage--        this.getWishInfo()    }},// 触底加载更多scrolltolower() {    this.currentPage++    this.getWishInfo()},

通过同时监听scrolltoupper和scrolltolower事件，你可以在触底时向下加载更多数据，而在触顶时则不执行任何操作。这样就能避免向上滚动时触发加载更多的问题了。