Qt qml pageview 左右滑动分页组件

【先看效果】

【下载】http://download.csdn.net/detail/surfsky/8516949

【调用】
 1 分页视图
 2     左右分页滑动列表组件
 3 示例
 4     PageView{
 5         id: pv
 6         width: 300
 7         height: 200
 8         Rectangle{
 9             width:pv.width; height:pv.height;
10             color: ‘red‘
11         }
12         Rectangle{
13             width:pv.width; height:pv.height;
14             color: ‘green‘
15         }
16         Rectangle{
17             width:pv.width; height:pv.height;
18             color: ‘blue‘
19         }
20     }
21 Author: surfsky.cnblogs.com 2014-12
22 Lisence: MIT 请保留此段声明
【核心代码】
 1 ListView{
 2     id: root
 3     width: 500
 4     height: 500
 5     model: pageModel
 6
 7     // 可视元素模型(直接输出可视元素)
 8     default property alias content: pageModel.children
 9     VisualItemModel {id: pageModel}
10
11     // 横向、只显示一个
12     orientation: ListView.Horizontal
13     snapMode: ListView.SnapOneItem
14     highlightRangeMode: ListView.StrictlyEnforceRange
15     cacheBuffer: 3
16     boundsBehavior: Flickable.StopAtBounds
17
18     // 当前页指示器
19     ListViewIndicator{
20         target : root
21         anchors.horizontalCenter: parent.horizontalCenter
22         anchors.bottom: parent.bottom
23         anchors.bottomMargin: 5
24         z: 2
25     }
26 }
时间: 2024-10-11 20:40:35

Qt qml pageview 左右滑动分页组件的相关文章

Qt qml listview 下拉刷新上拉分页控件

Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) [先看效果]    [功能] 1 下拉刷新和上拉分页逻辑 2 /下拉刷新 3 /上拉更多 4 /滚动栏 5 /工具栏半拉显隐 6 Author: surfsky.cnblogs.com 7 Lisence: MIT 请保留此文档声明 8 History: 9 init. surfsky.cnblogs.com, 2015-01 10 a

Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)

Qt qml中listview 列表视图控件(下拉刷新.上拉分页.滚动轴) 来源 https://www.cnblogs.com/surfsky/p/4352898.html 设置ListView涉及到将contentsY,即视图的可见部分的顶部,设置y为委托的值.另一个更改是interactive将视图设置为false.这样可以防止视图移动.用户不能再滚动列表或更改当前Item. contentY为列表上拉后列表左上角点距显示框左上解点的高度listView1.height为可显示部分的高度,

滑动分页pageview,滑动分页GridView

采用pageview做成的一个滑动分页效果,在里面添加Gridview视图,太深奥的东西我也不懂,不过反正能实现这种效果吧图片是借用的. 下载地址:http://www.devstore.cn/code/info/635.html 运行截图:   

第二百零九节,jQuery EasyUI,Pagination(分页)组件

jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使用方法,这个组件依赖于 LinkButton(按钮)组件.

JS表格分页组件:fupage的设计思路和具体用法(未来考虑开源,争取在2015年)

一.背景         之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现.    回到武汉工作后,我自己利用业余实践完善自己的官网,从前端到后端,都是自己一个人亲自搞定.    第1个分页的需求是,文章下方的评论,异步加载.第2个需求是,表格管理,比如后台管理系统,经常需要列出user.log等表的记录.   二.实例 <table class="table tab

电子商务系统的设计与实现(十):DWZ框架与第三方分页组件整合

晚上,就是刚刚,在后端管理系统中使用DWZ框架. 先是,直接使用官网网站的Demo,dwz-jui,与编程语言无关的纯静态的那个原始项目. 很快就搭建好了左侧菜单,打开菜单后,出现Tab页面,然后显示目标页面的内容. 然后,就去关注表格分页部分. DWZ自带的分页组件,感觉太麻烦了,一方面分页分成了4个部分显示,主要包括:pagerForm,查询条件pagerHeader,分页表格的头部pagerContent,分页表格的正文panleBar,分页条数栏目. 另一方面,分页html和JS中,需要

基于Vue.js的表格分页组件

BootPage组件简介 其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能,我便在这里分享一下,大家自觉填坑咯. 如需高大上的组件,可以移步Vue官方组件库:https://github.com/vuejs/awesome-vue#libraries--plugins BootPage是一款支

javascript 分页组件

原文:javascript 分页组件 自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下: <ul class="pagination" id="pageDIV"> </ul> class="pagination" 给定了分页的样式, id="pageDIV"用于放置JS生成的分页 CSS结构如下: .pagina

Fit项目分页组件的编写

项目中涉及列表显示的地方都会用到分页控件,为了能更好地与当前网站的样式匹配,这次要自己实现一个. 所以选择了模板中提供的分页样式,基于模板改造以能够动态生成: 一 控件的行为规则 a) 可设置显示几个页码(默认5个,只能是奇数) 如果当前页显示5个,则默认前后各有两个,比如当前页是5,显示页码为"3 4 5 6 7 如果当前页在最前面,比如为1,显示页码为:1 2 3 4 5 同样当前页在最后面,比如为9,显示页码为:5 6 7 8 9 如果总页数少于5,比如只有3页,则页码全部显示:1 2 3