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

最新推荐文章于 2024-06-01 09:53:18 发布

矢车菊_

最新推荐文章于 2024-06-01 09:53:18 发布

阅读量826

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_49140905/article/details/122670877

版权

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

矢车菊_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Quasar框架中Scroll-Area组件使用

Quasar中的Scroll-Area组件使用心得
复制链接

扫一扫

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

对滚动区域QScrollArea用法的摸索(2)

最新发布

gitblog_00087的博客

06-01

351

探索未来前端的光芒：Quasar 框架项目地址:https://gitcode.com/anowell/quasar 在星系中心的超大质量黑洞，是宇宙奥秘的象征。而Web开发的前沿，正经历着类似的成长过程。Quasar，一个实验性的Rust到WASM和ASMJS的前端框架，正如超大质量黑洞中的能量源泉——类星体，准备释放出惊人的潜力。项目介绍 Quasar是一个以Rust语言为基石的新兴前端框...

quasar 滚动区域滚动条始终在最底端显示

前端小白到专家的博客

03-29

750

前端设置滚动区域始终保持显示在最底端。

element-plus：Dialog 对话框在有滚动条的页面会抖动

彭世瑜的博客

10-09

1510

查看元素发现，动态增加了一个style标签

【vue】实现高性能虚拟滚动的Vue代码解析

一位前行者的博客

08-26

864

通过以上的代码分析，我们深入了解了基于Vue实现的高性能虚拟滚动技术。这项技术通过动态计算偏移量和显示的数据范围，使得页面在渲染大量数据时能够保持流畅性。特别是在滚动事件中加入时间间隔判断，进一步优化了滚动性能。虽然本文只是简单介绍了虚拟滚动的实现思路，但它背后的原理和技术值得我们深入学习和探讨。通过这个示例，我们不仅可以提升页面性能，还可以更好地理解前端渲染机制和优化策略。希望本文对你理解和掌握虚拟滚动技术有所帮助！如果你有任何疑问或者想进一步深入讨论，欢迎在评论区留言。

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以开发模式启动应用程序

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当前使您的支持翻倍...

elementui tree 支持虚拟滚动和treeLine （上）

嗝~

06-09

2624

vue-router scrollBehavior无效的问题及解决方案

weixin_30322405的博客

01-30

1573

　在使用vue做单页面应用开发时候使用vue-router作为路由控制器在使用过程中发现每个页面打开都在原来的位置不能返回到页面顶部位置，然后查看api文档　　滚动行为发现如下代码： const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition...

vue前端实现浮动滚动信息

qq826303461的博客

09-27

1530

因为工作原因，需要用到自动滚动信息.所以在github上找了一款感觉还算不错的前端组件这里是仓库地址https://github.com/satrong/vue-text-marquee 代码量很小。很容易扩展因为业务原因，我对其做了点修改 TextMarquee.vue 组件 <template> <!-- 这里, 我想添加个点击触发事件,这个事件默认是...

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

quasar 常用

HouYing

05-29

2722

路由地址： quasar.conf.js

自定义滚动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框架无限滚动一直加载，分页失败的问题

a20001999的博客

08-27

542

今天遇到了一个这样的问题，一直在loadind，怎么设置offset都没用，找了好久，因为框架用的人比较少，都没找到怎么解决，后来发现是没有设置高度的问题，所以loading不知道底部在哪里(我猜的)，所以只要在外面设置一个高度就可以了 ...

QScrollArea的基本使用

qq_42123832的博客

06-30

1275

使用框架生成一个Qt Widgets Application，基类选择QWidget，取消生成ui文件然后在widget.cpp文件中下下如下代码： #include "widget.h" #include <QScrollArea> #include <QVBoxLayout> #include <QPushButton> Widget::Widget(QWidget *parent) : QWidget(parent) { QScrollArea

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` 类，它的宽度将根据所包含的内容自动调整。其他两个列则没有设置宽度，它们的宽度将根据表格的总宽度和第一个列的宽度自动分配。