前端页面滚动底部触发业务

VIP文章 UnforgetMemory

已于 2022-08-17 11:41:52 修改

阅读量493

点赞数

分类专栏： Vue TypeScript NavieUI 文章标签：前端 vue.js typescript

于 2022-08-16 22:00:38 首次发布

本文链接：https://blog.csdn.net/UnforgetMemory/article/details/126375232

版权

通过触发底部加载更多内容

参考环境

Vue 3.2.37
NaiveUI 2.32.1
TypeScript 4.7.4
tailwindcss 3.1.8

Demo

<template>
    <n-layout :has-sider="true" position="absolute" class=" h-auto">
        <n-layout-sider :native-scrollbar="false" bordered show-trigger collapse-mode="width" :collapsed-width="16"
            :width="240" style=

最低0.47元/天解锁文章

优惠劵

UnforgetMemory

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端页面滚动底部触发业务

通过触发底部加载更多内容。
复制链接

扫一扫

专栏目录

设置界面的togglelayout布局

04-04

源码ToggleExpandLayout，一个可以用在设置界面的togglelayout，一个页面展示特效,点击展开按钮后呈现阶梯式的叠加出现, 点击关闭按钮,从下到上一一缩小收回,根据SwitchButton点击监听setOnToggleTouchListener 的案例。

Vue3+Vite+Pinia+Naive后台管理系统搭建之九：layout 动态路由布局

weixin_64684095的博客

08-07

1812

手摸手~，新手+小白构建vue3.0项目教程~

参与评论您还未登录，请先登录后发表或查看评论

黑马头条----首页和登录模块

weixin_63471708的博客

03-08

1455

登录注册创建 src/views/login/index.vue并配置路由 <template> <div class="login-container">登录页面</div> </template> <script> export default { name: 'LoginPage', components: {}, props: {}, data () { return {} }, compute

Naive-Ui-Admin样式修改——导航菜单样式、内容修改

qq_41141657的博客

10-06

4977

导航菜单背景颜色修改 css样式中添加 ::v-deep(.n-layout-sider){ background-color: #336699 !important; color: white; } 菜单修改文字菜单修改图标 https://ionic.io/ionicons 查找需要的图标，点击可得到图标名称把-格式改成EarthOutline 填在对应的两个区域 ...

layout布局_[Angular 组件库 NG-ZORRO 基础入门] Day 03 - 玩转布局与菜单

weixin_39928102的博客

12-03

1351

前言回顾本章内容这是我们在项目实战前比较重要的一个部分，完成该部分菜单布局开发后，我们就具备了一个项目基础的布局框架：页面布局、菜单导航、内容页、基础路由配置。在下述布局示意图 (stackblitz demo) 中，我们看到其中涉及到了几个组件：布局（Layout）和菜单（Menu）。布局设计Layout作为一个组件库，Layout 布局组件是绝对不会少的，我们一起先来看看 NG-ZORRO...

jQuery页面上下滚动触发区块动画特效

06-10

一款jQuery实现的当页面向下或向上滚动时，网页触发区块动画特效，很有弹性的动感效果。

JS实现判断滚动条滚到页面底部并执行事件的方法

10-25

主要介绍了JS实现判断滚动条滚到页面底部并执行事件的方法,本文先是分析了需求以及必备知识,然后给出实现代码,需要的朋友可以参考下

判断滚动条滑到底部触发事件(实例讲解)

08-28

下面小编就为大家带来一篇判断滚动条滑到底部触发事件的实例讲解。具有很好的参考价值。一起跟随小编过来看看吧，希望对大家有所帮助

jQuery页面滚动触发区块特效

06-24

jQuery页面滚动触发区块特效是一款当页面向下或向上滚动时，区块动画特效。

js判断iframe内的网页是否滚动到底部触发事件

10-23

主要介绍了js判断iframe内的网页是否滚动到底部触发事件,需要的朋友可以参考下

关于antd Layout的Content在首次渲染时宽度超出的问题

微光的博客

04-22

1052

大概原因是因为项目是layout包裹content，当layout和当前dom都重载时，layout还未render完毕时，当前dom的this.elementRef.current获取的宽度会是整个屏幕；当layout加载完毕，Content会超出原本设定的100%；在layout添加hasSider即可官方文档：布局 Layout - Ant Design ...

vue3+rust个人博客建站日记3-编写主页

Deslord的博客

02-26

949

记录了主页编写流程与vue组件封装过程

从零开始学习Vue3和Naive UI打造一个待办事项应用。

J_Sky：编程爱好者,又菜又爱玩.

02-19

1533

这个简单的待办事项的小项目功能很简答，事项了代办事项的添加、删除、完成、分类显示代办事项中的已完成和未完成事项，额外添加了主题的切换。这个待办事项的小项目还是有很多功能可以添加的，比如编辑项目内容，按照一定的属性排列项目等。能够搭建此项目并编写出项目的代码，我觉得可以算是入门了Vue3了。

naiveui 的n-menu使用字体icon解决方案

xuelang532777032的博客

06-13

1147

先看效果好，来直接说操作方法。

vue3+rust个人博客建站日记5-所有界面

Deslord的博客

03-05

1186

记载全部前端部分的界面绘制。

【Ant Design Vue】之layout布局

最新发布

09-06

### 回答1：下拉加载是前端常见的一种数据加载方式，可以提高用户体验，以下是一些实现下拉加载的方法： 1. 监听滚动事件可以通过监听滚动事件，当滚动到页面底部时触发加载更多数据的操作。实现代码如下： ```javascript window.addEventListener('scroll', function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var windowHeight = window.innerHeight; var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; if (scrollTop + windowHeight + 50 >= scrollHeight) { // 触发加载更多数据的操作 } }); ``` 2. 使用IntersectionObserver IntersectionObserver是新的浏览器API，可以监听元素与视口的交叉情况。可以通过监听列表底部元素是否进入视口来触发加载更多数据的操作。实现代码如下： ```javascript var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { // 触发加载更多数据的操作 } }); }); observer.observe(document.querySelector('#list-end')); ``` 3. 使用第三方库也可以使用第三方库来实现下拉加载，比如jQuery插件：Infinite Scroll。实现代码如下： ```javascript $('#list').infiniteScroll({ path: 'next-page-url', append: '.item', history: false, status: '.page-load-status', scrollThreshold: 50, debug: true }); ``` 以上是实现下拉加载的一些方法，可以根据实际情况选择合适的方式来实现。 ### 回答2：前端PC端实现下拉加载，一般可以通过以下几个步骤来实现： 1. 监听滚动事件：首先，需要通过监听滚动条的滚动事件，来判断用户是否滚动到了页面底部。 2. 判断滚动到底部：在滚动事件触发时，获取当前的滚动位置和页面高度，然后判断滚动位置是否达到页面底部。可以通过比较 `滚动位置 + 窗口高度 ≥ 文档高度 - 触发加载的阈值` 来判断是否在页面底部。当达到这个条件时，触发加载。 3. 加载数据：一般是通过 Ajax 请求向服务器请求新的数据。可以在滚动到底部时通过异步请求发送给后端。 4. 渲染数据：当数据加载成功后，将新加载的数据通过 DOM 操作插入到页面中。可以通过创建新的 DOM 元素，或者更新已有的 DOM 元素来展示新加载的数据。 5. 更新滚动位置：当数据加载成功并渲染完毕后，更新滚动位置，将滚动条移动到之前的位置，以便用户可以继续滚动加载更多的数据。需要注意的是，为了提升用户体验，可以在触发加载之前显示一个加载中的状态，比如显示一个加载的动画或者提示文字，在数据加载完毕后再将加载状态去除。另外，还需要考虑用户网络状况不佳或者服务器响应慢的情况，可以设置一些防止多次触发加载的措施，比如通过节流函数或者防抖函数来控制加载频率。通过以上步骤，就可以在前端PC端实现下拉加载功能。当用户滚动到页面底部时，自动加载新的数据，并展示在页面上，从而实现无限滚动的效果。 ### 回答3：前端pc端实现下拉加载是一种常见的网页加载方式，通过滚动到页面底部时自动加载更多内容，以提高用户体验和页面加载速度。实现下拉加载的关键是监听页面滚动事件，当滚动到页面底部时触发加载更多的操作。以下是实现下拉加载的一般步骤： 1. 监听滚动事件：使用JavaScript代码监听页面滚动事件，当滚动条滚动到页面底部时触发加载更多的操作。 ```javascript window.addEventListener('scroll', function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; if (scrollTop + windowHeight >= scrollHeight) { // 触发加载更多的操作 loadMore(); } }); ``` 2. 实现加载更多的操作：在触发加载更多的操作时，向服务器发送请求获取更多的数据，并将数据渲染到页面中。 ```javascript function loadMore() { // 向服务器发送请求获取更多的数据 // ... // 将数据渲染到页面中 // ... } ``` 3. 渲染数据到页面中：根据从服务器获取到的数据，使用JavaScript代码将数据渲染到页面中。 ```javascript function renderData(data) { // 将数据渲染到页面中 // ... } ``` 通过以上三个步骤，就可以实现前端pc端的下拉加载功能。在实际开发中，可以根据具体的需求进行优化，如添加加载动画、防止重复加载等。同时，需要确保服务器端有提供接口供前端获取更多数据。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交