因为需要做一个无限滚动的table效果，然后百度了一下，看到网上挺多用 vue-seamless-scroll 的，然后自己就用了。后面一些问题给大家总结下。使用很简单，这里就不阐述了，主要讲下用这个的一些业务要求，遇到的问题。无限滚动原理：无限滚动的原理就是把之前的遍历的内容复制一份，滚动这两部分内容，达到无缝滚动效果。需求：首先需要一个这样的需求，才能碰到这个问题（通过点击列展示详情数据）遇到
在左右弹性布局的网页里，当网页的高度发生变化时，浏览器右侧的滚动条会出现，出现和消失的时候，会使得整个页面向左右发生细微的移动，非常的不舒服，此时使用el-scrollbar可以有效解决这个问题。 先在全局css里将整个网站的body里设置overflow: hidden;这样浏览器默认的右侧滚动条就不会再出现，也可以只设置overflow-y: hidden;因为网页宽度不够用是很少见的。 然后
转载
2024-04-06 09:20:31
1492阅读
云开发数据库之触底自动加载在前面的两篇文章中，我们简单的谈了谈云开发数据库与传统数据库的差异，以及云开发数据库中的权限机制，今天我们来分享一些实用的代码，快速帮助大家完成自己的小程序的部分功能。微信小程序实现触底自动加载在开发小程序类信息流类型的应用时，我们经常会有一个需求，就是当用户将列表滑动到列表的底部时，自动加载新的数据中，从而实现无限下拉，获得一个更好的体验。大部分用户在进行
转载
2024-07-02 23:14:43
195阅读
背景: 一个后台管理系统,当管理员登录之后,会存在一个自己的id值, 在一个表格中,当点击"定位"按钮后,屏幕滚动到拥有管理员id的这一行,并且给设置一个高亮的背景 相关知识点: 查找数组中是否存在某个字段 获取父节点 获取全部子节点 动态添加id 屏幕滚动到指定位置 ...... 1.定义事件<el-button size="mini" type="in
转载
2024-06-05 21:27:06
389阅读
文章目录一、前言二、表格错位三、横向滚动条四、拓展阅读 一、前言在前端项目开发过程中，解决适配性、兼容性问题是经常遇到且费事费力的苦差事，尤其是在开发Vue项目，应用部署在IE（尤其是IE9）上的时候。在进行动态展示（根据后台返回的表头、表数据展示）搜索结果时，会遇到搜索结果适配屏幕宽度或高度，但是却会出现纵向或横向滚动条的现象，通过F12调试页面元素，会发现动态的增删overflow:auto元
转载
2024-03-25 10:18:18
1846阅读
项目场景：我们都知道浏览器自带的滚动条非常粗糙，直到我学vue时用了element-ui，我发现他们官方文档的滚动条非常简约，很不错，于是便找了下文档但没找着，接着打开浏览器控制台，发现了el-scrollbar的类名，心想是不是有这么一个隐藏的组件，没想到试了下真的有，写了个Demo分享给大家。代码：<!DOCTYPE html>
<html>
<head>
转载
2024-03-20 10:04:16
786阅读
在项目中遇到了一个性能问题vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验，这个时候常常有两种方法处理， 1、分页，如下 2、如果我不想分页，又想在一页显示全部数据呢？这个时候其实就可以用数据懒加载了如下一开始表格只显示31行数据当将滚动条拉到低的时候，就会再加载31条数据，
转载
2024-03-21 22:18:06
114阅读
element-ui的官网页面使用的这个滚动条，但是在官网文档中没有介绍这个组件。在vue+elementui搭建的前端项目中使用这个el-scrollbar组件。在项目中使用这个组件时由于各层的样式没有设置好，可能会显示出原生的滚动条，特此记录。搭建脚手架项目，安装element-ui插件按需引入需要的组件import Vue from 'vue'
import {
Scrollbar
}
转载
2024-03-20 12:20:30
331阅读
为什么要用el-scrollbar？最近在写一个内部平台系统，相信大家都知道，其中会有很多自定义的滚动区域，就比如说现在有一个列表需要滚动，第一个念头就是用 overflow: scroll; 啊！嗯嗯，又不是不能用！如果我不曾见过太阳，我本可以忍受黑暗。 大家总会见过不少滚动条比较优雅的实现，不可否认，美是让人愉悦的。所以这些年行走江湖我满怀愧疚，让大家见丑了。
转载
2024-08-16 09:36:20
2338阅读
前言如果项目使用了elementUI，可以看一下。如果没有使用，可以看我的另一篇文章，用div写的滚动表格项目看板滚动数据显示。参考文章：Element动态生成表格以及表格内容无缝滚动感谢这篇文章的思路，开阔了思路。指令版需求（功能）数据按条滚动支持自定义列内容设置表格背景色和字体颜色本来还想加个鼠标移入停止，移出重新滚动的功能，但是指令里没法监听。这个功能就没法实现效果图实现代码let valu
转载
2024-02-19 14:18:57
2548阅读
在手机端浏览网页时，经常使用一个功能，当我们浏览京东或者淘宝时，页面滑动到底部，我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的，于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果： 当滚动条滚动到页面底部时，提示“正在加载…”。 当页面已经加载了所有数据后，滚动到
前言刚好项目里面一直在使用的都是element，因为原生的滚动条太丑了，发现elementui中有个隐藏的组件，就是element官网使用的滚动条，可以优化滚动条样式。亲测可用，鼠标经过的时候才会显示，简单美观。正文首先全局引入element，import ElementUI from 'element-ui';简单使用–只是用竖的滚动条 只是用竖的滚动条，外层box设置宽高，内层的内容充满，设置
转载
2024-03-04 13:08:38
661阅读
目录 前言一、组件介绍二、表格组件1.表头组件2.表格整体代码三、用法总结 前言在工作当中会遇到一些比较奇葩的需求，比如表格需要承载几千或上万条的数据并表示不要分页，所以针对这种需求制定了一个可以不需要分页的表格。一、组件介绍该组件是使用element-ui的el-table做的封装，理念就是将分页换了一种形式，使用滚动条模拟懒加载分页，其实万变不离其宗，本质上表格数据还是后台人员给分页过的，只不
转载
2024-04-01 09:52:34
93阅读
今天遇到一个需求，就是要实现表格的滚动加载。通常我们经常实现的效果是：下图中带分页的表格 vue——antd+elementUi——table表格实现滚动加载_分页滚动加载效果图1.添加自定义滚动加载指令文件1.1 在`utils`文件夹中创建 `loadMore.js`1.2 添加如下代码：1.3 在`main.js`中添加以下代码1.4 页面中的使用方式 效果图 如果要实现滚动分页加载的话，则
转载
2024-02-19 10:54:05
1528阅读
先上图 其他的功能也遇到过不少的问题,但这篇博客先说一下做滚动加载的时候遇到的问题。 我最开始写PC端比较多,现在开始写移动端,之前PC端可以用点击分页搞定的事情,在移动端用户体验就会变得特别差,领导说要做一个滚动加载,让我找一个组件弄,别自己写. 但是那么多框架呢,怎么挑啊?找来找去我选了Weui,一方面是大厂的框架,肯定会长期维护,二是结构简单,样式简约,当然还有一点就是使用简单
转载
2024-07-24 22:52:39
59阅读
这个实例应该说可以很简单，直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理，遇到一些小知识点可以分析一下也算有所得。 原理很简单，就是为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部，算法如下滚动条卷起来的高度 + 窗口高度 > 文档的总高度 +
前言从Vue.js 2.x发布之后，陆陆续续做了七八个项目，摸索出来了一套自己的状态管理模式，我将之称为Vuet。它以规则来驱动状态更新，它带来的是开发效率上的飙升，它就像草原，而你是野马，任你随意驰骋，总之它是为敏捷开发而诞生。缘由在大型的Vue应用程序开发中，多组件通信、多页面通信，往往是跨不过的坎，一个页面组件中往往参杂着页面获取数据的代码和响应用户操作的代码，稍有不慎，就使得代码混乱不堪。
element-ui的table表格的滚动条并不能满足我们实际的开发需求，特别是对于window用户来说，当表格超出屏幕范围时，每当要滑动时都需要滑到最底部才能滚动，很不方便。还有就是启用冻结效果后，滚动条被盖住的问题。本文就是为了解决这些问题，先看看实际效果。1、效果1、滑到底部时 2、未滑到底部时 效果还是很不错的，十分丝滑。 看了效果后直接开干吧。2、操作流程1、首先去除掉原有element
转载
2024-03-12 14:36:15
477阅读
滚动条(ScrollBar)主要用来从某一预定义值范围内快速有效地进行选择。滚动条分垂直滚动条和水平滚动条两种。在滚动条内有一个滚动框，用来表示当前的值。用鼠标单击滚动条，可以使滚动框移动一页，鼠标单击滚动条两端的剪头可以使滚动框移动一行，也可以直接拖动滚动框。许多窗口控件如列表框和组合框等都带有滚动条子窗口。Win32的滚动条支持比例滚动框，即用滚动框的大小来反映页相对于整个范围的大小。
转载
2024-07-30 16:18:30
402阅读
由于接收到要求，项目由vue2切换成vue3，要前台列表使用无限滚动展示数据，我在查阅资料后发现原来官方推荐的方法是vue-infinite-scroll这个现在已经不在维护的插件，虽然vue-infinite-scroll确实挺好的，但就是不支持vue3，所以我使用的是原生的scroll标签实现的。相当于滚动加载下一页的数据。 上代码：import { ref
转载
2024-04-14 06:13:17
2029阅读
