关于Quasar框架中Scroll-Area组件使用

最新推荐文章于 2024-06-01 09:53:18 发布
最新推荐文章于 2024-06-01 09:53:18 发布
阅读量826 收藏
点赞数
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49140905/article/details/122670877
版权

小伙伴提了一个问题是这样的：

要实现的就是，用户进入在当前页面的时候滑动滚动条，离开的时候保存下滚动条的位置，再次进入的时候定位到上次浏览的位置

就是这种效果，下面贴上代码，其中的position是当前滚动条的scroll位置

其实这样是一直在做动态监听，没有性能方面的考虑，也是简单实现了下效果，如果是项目中使用可能要做更多的考虑 

矢车菊_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
quasar-ui-qscroller:QScroller-适用于Quasar的App Extension，Vue CLI和UMD
04-29
QScroller（Vue插件，UMD和Quasar应用程序扩展） 结构 独立的npm软件包（有关更多信息，请转到此处） 类星体应用扩展 文档，演示和示例项目 -现场文档，演示和示例 演示工作流程 如果分叉或下载此项目，请确保已全局安装Quasar CLI： $ npm i -g @quasar/cli 在一个新项目上构建演示的工作流程如下： $ cd ui $ yarn $ yarn build $ cd ../demo $ yarn $ quasar dev 捐 如果您欣赏其中的工作，请考虑向或捐款。 执照 麻省理工学院（c）Jeff Galbraith
vue-quasar-company-profile-website:Kudos - 使用 Vue.js 和 Quasar Framework 制作的公司简介网站
05-29
使用的资源安装克隆存储库 git clone https://github.com/mayank091193/vue-quasar-company-profile-website.git安装依赖项 cd vue-quasar-company-profile-websitenpm install以开发模式启动应用程序
element-plus：Dialog 对话框在有滚动条的页面会抖动
彭世瑜的博客
10-09 1510
查看元素发现，动态增加了一个style标签
elementui tree 支持虚拟滚动和treeLine （上）
嗝~
06-09 2624
最终在查阅相关资料时，发现github有一个大佬使用vue-virtual-scroller自己写了一个elementui tree的扩展组件。同时这款组件还能完美的继承elementui tree上的属性和方法，算是过渡最为平滑的组件了。需求变更：虽然虚拟滚动实现了，但是在演示的时候领导觉得，还是加个treeLine 更好看。所谓的treeLine 就是tree展开时，侧边那一条条带有结构性质的边线。确认这个ui就是我们要的，下一步就是发布到npm了。的源码上进行调整，毕竟业务代码已经写了那么多了。
探索未来前端的光芒：Quasar 框架
最新发布
gitblog_00087的博客
06-01 351
探索未来前端的光芒：Quasar 框架 项目地址:https://gitcode.com/anowell/quasar 在星系中心的超大质量黑洞，是宇宙奥秘的象征。而Web开发的前沿，正经历着类似的成长过程。Quasar，一个实验性的Rust到WASM和ASMJS的前端框架，正如超大质量黑洞中的能量源泉——类星体，准备释放出惊人的潜力。 项目介绍 Quasar是一个以Rust语言为基石的新兴前端框...
【vue】实现高性能虚拟滚动的Vue代码解析
一位前行者的博客
08-26 864
通过以上的代码分析，我们深入了解了基于Vue实现的高性能虚拟滚动技术。这项技术通过动态计算偏移量和显示的数据范围，使得页面在渲染大量数据时能够保持流畅性。特别是在滚动事件中加入时间间隔判断，进一步优化了滚动性能。虽然本文只是简单介绍了虚拟滚动的实现思路，但它背后的原理和技术值得我们深入学习和探讨。通过这个示例，我们不仅可以提升页面性能，还可以更好地理解前端渲染机制和优化策略。希望本文对你理解和掌握虚拟滚动技术有所帮助！如果你有任何疑问或者想进一步深入讨论，欢迎在评论区留言。
quasar 滚动区域滚动条始终在最底端显示
前端小白到专家的博客
03-29 750
前端设置滚动区域始终保持显示在最底端。
quasar-app-extension-tailwindcss:此扩展将TailwindCSS包含到Quasar框架中
05-01
通过此扩展，可以轻松地将TailwindCSS（ ）集成到Quasar（ ）中。 安装 现在，此扩展使用TailwindCSS v2 。 quasar ext add tailwindcss 当前，我们使用tailwindcss@^2.0.1-compat 。 虽然TailwindCSS v2需要post...
quasar-app-extension-vuelidate-rules:使用Vuelidate方法作为内部Quasar规则进行验证
05-10
Quasar Framework提供了一种非常实用的方法来验证表单字段，方法是使用Field包装器，输入和选择组件中的rules属性。 该属性接受一个返回真值的函数数组或带有错误消息的字符串。 在大多数情况下，这就足够了，但是...
quasar-app-extension-ssg:Quasar的静态Site Generator应用程序扩展
05-01
用于Quasar的静态Site Generator应用程序扩展，Vue.js框架 App Extension生成静态站点AKA 。 创建该项目是为了满足Quasar的。 | | | | | 资讯 正在安装 在Quasar项目中运行以下命令： quasar ext add ssg 这将...
quasar-admin:基于Vue.js和使用过的Quasar框架的免费Quasar管理模板
04-14
基于Vue.js和使用的Quasar框架的免费Quasar管理模板。 网站： ： 支持 如果这以任何方式对您有所帮助，您可以通过支持我为该项目的长期生存做出贡献： 请务必查看我的赞助商页面。 （GitHub当前使您的支持翻倍...
vue前端实现浮动滚动信息
qq826303461的博客
09-27 1530
因为工作原因，需要用到自动滚动信息.所以在github上找了一款感觉还算不错的前端组件 这里是仓库地址https://github.com/satrong/vue-text-marquee 代码量很小。很容易扩展 因为业务原因，我对其做了点修改 TextMarquee.vue 组件 <template> <!-- 这里, 我想添加个点击触发事件,这个事件默认是...
vue-router scrollBehavior无效的问题及解决方案
weixin_30322405的博客
01-30 1573
　在使用vue做单页面应用开发时候 使用vue-router作为路由控制器 在使用过程中发现每个页面打开都在原来的位置 不能返回到页面顶部位置 ，然后查看api文档 　　滚动行为 发现如下代码： const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition...
对滚动区域QScrollArea用法的摸索(2)
潇的专栏
05-14 1万+
上一篇：对滚动区域QScrollArea用法的摸索         上个月写了一篇对滚动区域QScrollArea用法的摸索，当时时间仓促，自己测试成功了，就把我的方法写上去了。收到网友pjangel007 的留言，说放在QScrollArea里的控件iconEditor的sizePolicy属性设为Expanding也可以。抱着严谨的态度我又新建了个工程实验了一下。         我用的是
quasar使用下拉刷新(Vue2项目)
m0_52364694的博客
10-05 531
template部分（代码使用q-pull-to-refresh组件包裹） <div class="q-pa-md scroll" style="height: 300px"> <q-pull-to-refresh @refresh="refresh"> <div v-for="(item, index) in items" :key="index" class="q-mb-sm"> <q-badge co
自定义滚动better-scroll
john987321456的博客
11-27 276
组件自定义滚动better-scroll 第一、安装better-scroll插件 npm install better-scroll --save 第二、指定滚动组件 <template> <div ref="area_scroll"> <ul> <li>这一个不可思议的哦</li> <li>这一个不可思议的哦</li> ...
quasar 常用
HouYing
05-29 2722
路由地址： quasar.conf.js
关于quasar框架无限滚动一直加载，分页失败的问题
a20001999的博客
08-27 542
今天遇到了一个这样的问题，一直在loadind，怎么设置offset都没用，找了好久，因为框架用的人比较少，都没找到怎么解决，后来发现是没有设置高度的问题，所以loading不知道底部在哪里(我猜的)，所以只要在外面设置一个高度就可以了 ...
对滚动区域QScrollArea用法的摸索
热门推荐
潇的专栏
04-01 2万+
好久没用Qt了。最近在为单片机驱动电机运动的小制作做轨迹生成程序。发现《C++ GUI Programming with Qt 4》(Second Edition)这本书中的Icon Editor这个例子很合适做我那个程序的轨迹绘制面板，就直接拿来用了。         我在IconEditor的外部实现了对IconEditor进行放大和缩小的函数。随着编写的进行发现如果我将IconEditor
vue quasar q-table--col-auto-width的作用
06-02
`q-table--col-auto-width` 是 Quasar 框架中 `q-table` 组件的一个 CSS 类。该类用于设置 `q-table` 组件中列的自动宽度。具体来说，当某个列使用 `q-table--col-auto-width` 类时，该列的宽度将根据所包含的内容自动调整。 在 Quasar 框架中，`q-table` 组件是一个非常强大和灵活的表格组件，可以用来展示各种类型的数据。`q-table` 组件中的列可以使用多种方式进行设置，包括指定固定宽度、百分比宽度或自动宽度等。其中，使用 `q-table--col-auto-width` 类可以让列的宽度更加智能地根据内容自适应，可以使表格更加美观和易用。 例如： ```html <q-table> <q-tr> <q-th class="q-table--col-auto-width">ID</q-th> <q-th>Name</q-th> <q-th>Email</q-th> </q-tr> <q-tr> <q-td>1</q-td> <q-td>Jane</q-td> <q-td>jane@example.com</q-td> </q-tr> <q-tr> <q-td>2</q-td> <q-td>John</q-td> <q-td>john@example.com</q-td> </q-tr> <q-tr> <q-td>3</q-td> <q-td>Alice</q-td> <q-td>alice@example.com</q-td> </q-tr> </q-table> ``` 在上面的例子中，第一个列使用了 `q-table--col-auto-width` 类，它的宽度将根据所包含的内容自动调整。其他两个列则没有设置宽度，它们的宽度将根据表格的总宽度和第一个列的宽度自动分配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值