概念介绍

无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式。无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的。当用户往下拖动滚动条或使用鼠标滚轮的时候,页面会自动加载剩余的内容。如下:

简约而不简单,正是这种别出心裁,突破常规的设计才能得到用户的青睐……

实现思路

在前端开发可以使用一些jQuery插件实现这种效果,后台只需要准备好数据就行了。在Qt中如何给列表组件(QListWidget,QTreeWidget, QTableWidget)或试图(QListView, QTreeView, QTableView)添加这样的效果呢?上面的无限加载的核心原理其实就是使用javascript侦听浏览器的滚动条事件。那么在Qt里面这样做就简单了。我们知道Qt中有一个基类叫做QAbstractScrollArea,它是一个代表可滚动区域的抽象基类。因此,这个类中有许多和滚动条操作相关的方法。QAbstractScrollArea恰好又是Q*View的父类,这正好为我们提供了操作滚动条的机会。

新建一个基于窗体的Qt应用程序工程,并从QListWIdget派生出一个子类:MListWidget。为什么呢?因为我们打算对鼠标滚轮事件作出一点点不一样的动作:当滚动条滚动的时候在主窗口的lineEdit中更新滚动条的当前位置;当滚动条滚到最底端的时候发送一个信号,以此更新ListWidget中的数据内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// mlistwidget.h
class MListWidget : public QListWidget
{
    Q_OBJECT
public:
    MListWidget(QWidget *parent);
    ~MListWidget();
 
signals:
    void msliderChanged(int p);
    void reachedBottom();
 
private slots:
    void onSliderChanged(int p);
     
private:
    QScrollBar* m_vscrollBar;
};
 
// mlistwidget.cpp
MListWidget::MListWidget(QWidget *parent)
    : QListWidget(parent)
{
    m_vscrollBar = verticalScrollBar(); // 保持垂直滚动条
    connect(m_vscrollBar, SIGNAL(valueChanged(int)), this, SLOT(onSliderChanged(int)));
}
 
void MListWidget::onSliderChanged(int p)
{
    int startRow = count();
    if (p == m_vscrollBar->maximum())
    {
        //QMessageBox::information(this, "Warning", "You reached the bottom of the vertical scroll bar!");
        emit reachedBottom(); // 1
    }
    emit msliderChanged(p);  // 2
}

  注释1处发送了一个信号reachedBottom(),通知主窗体给ListWidget添加新的内容;注释2处的信号通知主窗体更新滚动条的当前位置值。

接下来是主窗体的实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// testscrollbar.h
class TestScrollBar : public QMainWindow
{
    Q_OBJECT
 
public:
    TestScrollBar(QWidget *parent = 0);
    ~TestScrollBar();
 
private slots:
    void onScrollBarMoved(int);
    void onReachedBottom();
 
private:
    Ui::TestScrollBarClass ui;
};
 
// testscrollbar.cpp
TestScrollBar::TestScrollBar(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
 
    QListWidgetItem* temp;
 
    for (int i = 0; i < 100; i++)
    {
        temp = new QListWidgetItem();
        temp->setText("zhangzhongke_"+QString::number(i));
        ui.listWidget->insertItem(i, temp);
    }
 
    connect(ui.listWidget, SIGNAL(msliderChanged(int)), this, SLOT(onScrollBarMoved(int)));
    connect(ui.listWidget, SIGNAL(reachedBottom()), this, SLOT(onReachedBottom()));
}
 
void TestScrollBar::onScrollBarMoved(int v)
{
    ui.lineEdit->setText(QString::number(v));
}
//  更新ListWidget中的内容,插入新数据到最后
void TestScrollBar::onReachedBottom()
{
    QListWidgetItem* temp;
    int startRow = ui.listWidget->count();
    for (int i = startRow; i < startRow+5; i++)
    {
        temp = new QListWidgetItem();
        temp->setText("hello_"+QString::number(i));
        ui.listWidget->insertItem(i, temp);
    }
 
}

  这里从QListWidget中派生出了一个新的子类,记得在UI designer中对QListWidget组件进行提升(promote)。在Promote to...的时候填写我们派生出来的子类MListWidget。

实际效果

鼠标滚动到底部的时候,每次插入5条数据。

参考

  • 瀑布流与无限加载的结合案例:http://down.admin5.com/demo/code_pop/18/745/

http://www.cnblogs.com/csuftzzk/p/qt_infinitescroll.html

Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)的更多相关文章

  1. Qt实现小功能之列表无限加载

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  2. Ajax做列表无限加载和Ajax做二级下拉选项

    //栏目Ajax做加载 public function ajaxlist(){ //echo "http://www.域名.com/index.php?a=Index&c=Index ...

  3. 在线配置热加载配置 go-kratos.dev 监听key

    paladin https://v1.go-kratos.dev/#/config-paladin example Service(在线配置热加载配置) # service.go type Servi ...

  4. Vue中实现一个无限加载列表

    参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...

  5. h5页面列表滚动加载数据

    h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...

  6. Vue.js 开发实践:实现精巧的无限加载与分页功能

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...

  7. JS实现-页面数据无限加载

    在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...

  8. JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)

    概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...

  9. 通过angularjs的directive以及service来实现的列表页加载排序分页

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

随机推荐

  1. 【cordova】cordova安装步骤(windows)

    原文:[cordova]cordova安装步骤(windows) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/snow_finland/artic ...

  2. 如何在spring quartz类中拿到ServletContext

    ContextLoader.getCurrentWebApplicationContext().getServletContext() web.xml里加个: <listener> < ...

  3. Android菜鸟的成长笔记(20)——IntentService

    前面介绍的Service在官方文档介绍中说Service存在着如下两个问题: 1.A Service is not a separate process. The Service object its ...

  4. Multiple address space mapping technique for shared memory wherein a processor operates a fault handling routine upon a translator miss

    Virtual addresses from multiple address spaces are translated to real addresses in main memory by ge ...

  5. 打开一个很好的介绍Lucene4 FST文章

    我没有看到源代码.看到这个博客了解一些基本的,像笔者下: http://download.csdn.net/download/guanxinquan/7380591 http://blog.sina. ...

  6. 简单的JAVA MVC框架模式--Java-servlet-JavaBean

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...

  7. win7 UAC bypass(微软已经给予了三组组件绕过UAC启动的特权)

    fireworm同学的翻译: 原文在http://www.pretentiousname.com/misc/win7_uac_whitelist2.html我只翻译了其中关于原理的一小部分,有兴趣的可 ...

  8. Modbus 通信协议详解

    一.Modbus 协议简介     Modbus 协议是应用于电子控制器上的一种通用语言.通过此协议,控制器相互之间.控制器经由网络(例如以太网)和其它设备之间可以通信.它已经成为一通用工业标准.有了 ...

  9. delphi json uLkJSON

    delphi 7 json 做个笔记,留着以后用 --源码 unit Umain; interface uses Windows, Messages, SysUtils, Variants, Clas ...

  10. WPF Bind 绑定

    原文:WPF Bind 绑定 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/koloumi/article/details/74332515 用过W ...