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

Question

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

贝贝家的

821036

发布于
2023-11-28 山东

更新于
2023-11-28

咨询一个关于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事件，请问是什么原因造成的

前端 uview

阅读 2.5k

AI BotBETA

你遇到的问题应该是由于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事件，你可以在触底时向下加载更多数据，而在触顶时则不执行任何操作。这样就能避免向上滚动时触发加载更多的问题了。

1 个回答

得票最新

陟上晴明

22k145391

发布于
2023-11-28 浙江

更新于
2023-11-28

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

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