栅格 GridView ​

qt-grid-view是实现网格排版的ui组件，常用于多行多列的内容排版。支持数据分页。

  • 特点，初始化组件返回数据代理值，直接操作返回值更新ui视图，减少冗余api，降低开发成本。

  • 注意，不支持qt-grid-view嵌套,最低支持SDK版本2.1。

  • 注意，组件中默认item样式使用qt-poster，在构建数据中可查看其使用方式。也可自定义item。

  • 注意，自定义item样式中文本标签仅支持text-view。qt-list-view 是同 ul 一样注册的用于多功能的列表组件，增加数据代理，常用于单行多列的内容排版。支持横向纵向排列滚动，支持数据分页。

基础用法 ​

点击查看源码
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-viewHTML片段中type属性值要与data中的type值对应。

  • qt-grid-viewHTML片段中设置属性值需要使用${属性值}。

  • qt-grid-viewHTML片段中文本标签仅支持<text-view>。

  • qt-grid-view设置css宽度要与areaWidth属性值一样。

分页效果 ​

点击查看源码
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刷新组件