栅格 GridView
qt-grid-view
是实现网格排版的ui组件,常用于多行多列的内容排版。支持数据分页。
特点,初始化组件返回数据代理值,直接操作返回值更新ui视图,减少冗余api,降低开发成本。
注意,不支持
qt-grid-view
嵌套,最低支持SDK版本2.1
。注意,组件中默认item样式使用
qt-poster
,在构建数据中可查看其使用方式。也可自定义item。注意,自定义item样式中文本标签仅支持
text-view
。qt-list-view
是同ul
一样注册的用于多功能的列表组件,增加数据代理,常用于单行多列的内容排版。支持横向纵向排列滚动,支持数据分页。
基础用法
![](/component/gridview/grid_view_basic.gif)
点击查看源码
vue
<script lang="ts">
import {defineComponent, ref} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';
export default defineComponent({
setup() {
const gridViewRef = ref<QTIListView>();
let arr: Array<QTListViewItem> = [];
let listDataRec: Array<QTListViewItem> = [];
for (let i = 0; i < 24; i++) {
let imgSrc =
'https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750';
const poster: QTPoster = {
type: 10001,
decoration: {top: 20, left: 20, right: 20, bottom: 20},
title: {
text: '主标题' + i,
enable: true,
style: {width: 260},
},
style: {width: 260, height: 320},
titleStyle: {width: 260, height: 120, marginTop: 320 - 60},
titleFocusStyle: {width: 260, marginTop: 320 - 100},
};
arr.push(poster);
}
listDataRec = gridViewRef.value!.init(arr);
// 初始化组件之后返回值常用操作
// 获取引用类型值 let getData = JSON.parse(JSON.stringify(listDataRec))
// 获取基本类型值 listDataRec[0].assetTitle
// 修改值 listDataRec[0].assetTitle = '更新assetTitle'
// push listDataRec.push({ 单条数据 }) | listDataRec.push(...[多条数据]) //push方法
// pop listDataRec.pop() //pop方法 末尾删除一条item
// concat listDataRec.concat(data) //concat方法 链接listDataRec数据
// splice(1个参数) 删除 listDataRec.splice(1) //splice方法删除 从第一项开始删除之后所有item
// splice(2个参数) 删除 listDataRec.splice(1, 2) //splice方法删除 (从第1个开始 删除2条item)
// splice(3个参数 - 替换) listDataRec.splice(4, 2, data) //splice方法-替换 从索引位置 4 开始,替换两个元素,替换的data (当三个参数第二个参数不为0时 为替换)
// splice(3个参数 - 插入) listDataRec.splice(4, 0, data) //splice方法-插入 从索引位置 4 开始,替换0,插入的data (当三个参数第二个参数为0时 为插入)仅支持runtime版本 2.3+
// forEach循环 listDataRec.forEach(el => { el.assetTitle = '修改assetTitle' }) //循环修改每个item的值 整体更新
// for循环 for (let i = 0; i < listDataRec.length; i++) { if () { } } //循环更新符合条件的每个item 当筛选个别条件的item时可以使用for循环,当循环修改每个item的值时建议使用forEach循环
// 重新赋值 listDataRec.splice(0); listDataRec.push(...data) // 整体更新
},
});
</script>
<template>
<qt-grid-view
class="grid_view"
ref="gridViewRef"
:spanCount="6"
:areaWidth="1800"
>
<!-- 结合poster组件快速生成item 亦可自定义item-->
<qt-poster />
</qt-grid-view>
</template>
注意事项
qt-grid-view
HTML片段中type属性值要与data中的type值对应。
qt-grid-view
HTML片段中设置属性值需要使用${属性值}
。
qt-grid-view
HTML片段中文本标签仅支持<text-view>
。
qt-grid-view
设置css宽度要与areaWidth
属性值一样。
分页效果
![](/component/gridview/grid_view_page.gif)
点击查看源码
vue
<script lang="ts">
import {defineComponent, ref, nextTick} from 'vue';
import {QTIListView, QTListViewItem, QTPoster} from '@quicktvui/quicktvui3';
export default defineComponent({
setup() {
const gridViewRef = ref<QTIListView>();
let listDataRec: Array<QTListViewItem> = [];
const loadMore = (pageNo: number) => {
let arr: Array<QTListViewItem> = [];
for (let i = pageNo * 6 - 6; i < pageNo * 6; i++) {
const poster: QTPoster = {
type: 10001,
decoration: {top: 20, left: 20, right: 20, bottom: 20},
title: {
text: '主标题' + i,
enable: true,
style: {width: 260},
},
style: {width: 260, height: 320},
titleStyle: {width: 260, height: 120, marginTop: 320 - 60},
titleFocusStyle: {width: 260, marginTop: 320 - 100},
};
}
if (listDataRec.length > 0) {
if (pageNo > 4) {
//如果分页请求完毕 调用 stopPage 方法
gridViewRef.value?.stopPage();
} else {
listDataRec.push(...arr);
}
} else {
nextTick(() => {
listDataRec = gridViewRef.value!.init(arr);
});
}
};
const onItemBind = () => void 0;
return {
gridViewRef,
onItemBind,
loadMore,
};
},
});
</script>
<template>
<qt-grid-view
class="list_view"
ref="gridViewRef"
@item-bind="onItemBind"
:spanCount="6"
:areaWidth="1800"
:itemHeight="320"
:listenBoundEvent="true"
:loadMore="loadMore"
:openPage="true"
>
<qt-poster />
<!-- loading样式 -->
<qt-view
class="loading"
type="1002"
name="loading"
ref="loading"
:focusable="false"
>
<qt-loading-view
color="#409eff"
style="height: 30px; width: 30px"
/>
</qt-view>
</qt-grid-view>
</template>
注意事项
listenBoundEvent
属性必须设置为true@item-bind
方法必须添加 可以不做任何处理openPage
属性值为true
pageSize
分页每页条数(当不确定每页条数时可以不设置)建议分页时必传loading
type
必须设置为1002,loading必须以具名插槽slot="loading"形式添加
stopPage()
分页结束后调用该方法停止分页分页结束后重新开启分页可v-if刷新组件