Javascript滚动条翻页数据动态加载

一般分页是通过按钮触发的,最近有一个需求通过滚动条进行触发,随后做了这样一个动态加载的功能。
滚动条滚动到下侧,80%的位置,向后翻页;
滚动条滚动到上册,20%的位置,向前翻页。

代码部分

// 总的数据量,这个一般后台传过来
let total_count = 10
// 总页数,总的数据量除以页数
let total_page_count = Math.ceil(total_count / PAGE_SIZE)
let scroll_percentage
// 计算当前的比例,滚动条的进度
scroll_percentage = $('.scroll-down').scrollTop() / $('#table').height() * 100
// 向后翻页,滚动条进度大于80
if (scroll_percentage > 80) {
    if (commit_flg) return
    commit_flg = true
    start_page += 1
    if (start_page >= total_page_count) start_page = total_page_count
    if (start_page < total_page_count) {
        $.ajax({
            method: 'post',
            url: '**************',
            cache: true,
            data: {
                'startPage': start_page,
                'pageSize': PAGE_SIZE
            },
            success: function(res) {
                $('#table').html(res)
                commit_flg = false
            }
        })
    } else {
        commit_flg = false
    }
}
// 向前翻页,滚动条进度小于80
else if (scroll_percentage < 20) {
    if (commit_flg) return
    commit_flg = true
    if (start_page > 1) {
        $.ajax({
            method: 'post',
            url: '**************',
            cache: true,
            data: {
                'startPage': start_page - 1,
                'pageSize': PAGE_SIZE
            },
            success: function(res) {
                $('#table').html(res)
                commit_flg = false
                start_page -= 1
            }
        })
    } else {
        commit_flg = false
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Vue中实现滚动条加载数据的一种常见做法是使用Intersection Observer API来监听滚动事件,并根据滚动位置来触发数据加载。以下是一个基本的示例代码: 首先,在Vue组件中添加一个滚动容器和一个占位符元素: ```html <template> <div class="scroll-container" ref="scrollContainer" @scroll="handleScroll"> <ul> <!-- 数据列表 --> <li v-for="item in items" :key="item.id">{{ item.name }}</li> <!-- 占位符元素 --> <li ref="placeholder"></li> </ul> </div> </template> ``` 然后,在组件的`mounted`钩子中设置Intersection Observer来监听占位符元素与滚动容器的交叉情况: ```javascript <script> export default { data() { return { items: [], // 加载数据列表 placeholderVisible: false, // 占位符元素的可见性 }; }, mounted() { const options = { root: this.$refs.scrollContainer, rootMargin: '0px', threshold: 1.0, }; this.observer = new IntersectionObserver(this.handleObserver, options); this.observer.observe(this.$refs.placeholder); }, methods: { handleObserver(entries) { entries.forEach((entry) => { if (entry.isIntersecting) { // 当占位符元素进入视口时加载数据 this.loadMoreData(); } }); }, loadMoreData() { // 模拟异步加载数据 setTimeout(() => { const newData = /* 从服务器获取新数据 */; this.items = [...this.items, ...newData]; this.placeholderVisible = false; }, 1000); }, handleScroll() { // 显示占位符元素 this.placeholderVisible = true; }, }, }; </script> ``` 以上代码中,Intersection Observer API被用来监听占位符元素与滚动容器的交叉情况。当占位符元素进入视口时,即滚动到页面底部时,会触发`loadMoreData`方法来加载更多数据。在`loadMoreData`方法中,你可以通过异步请求从服务器获取新数据,并将其添加到已有的数据列表中。 请注意,以上代码只是一个简单的示例,你可以根据自己的需求进行进一步的定制和优化。同时,为了提高用户体验,你可能还需要添加一些加载状态的提示,如加载中的loading动画等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值