使用初探

1. 基础模版

点击查看源码

<template>
    <qt-grid-view class="grid_view" ref="grid_view" :spanCount="5" :areaWidth="1920" :padding="'0,0,30,20'">
        <!-- 结合poster组件快速生成item 亦可自定义item-->
        <qt-poster :type="1"/>
    </qt-grid-view>
</template>

2. 组件初始化

1. 数据准备

点击查看源码

let data = []
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'
    // 引入PosterBuilder快速生成item数据
    let item = PosterBuilder.buildBottomTitleItem(imgSrc, '标题', 260, 320, 1)
    item.decoration = {top: 20,bottom: 60,left:25}
    data.push(item)
}

2. 初始化init

点击查看源码

let returnVal = this.$refs.grid_view.init(data)

//注意 returnVal将是整个组件控制视图变化的唯一数据

3. 初始化组件之后数据常用操作

点击查看源码

   获取引用类型值 let getData = JSON.parse(JSON.stringify(returnVal))

   获取基本类型值 returnVal[0].assetTitle

   修改值 returnVal[0].assetTitle = '更新assetTitle'

   push   returnVal.push({单条数据}) | returnVal.push(...[多条数据]) //push方法

   pop    returnVal.pop() //pop方法 末尾删除一条item

   concat returnVal.concat(data) //concat方法 链接returnVal数据

   splice(1个参数) 删除 returnVal.splice(1)    //splice方法删除 从第一项开始删除之后所有item

   splice(2个参数) 删除 returnVal.splice(1, 2) //splice方法删除 （从第1个开始 删除2条item）

   splice(3个参数-替换) returnVal.splice(4, 2, data)    //splice方法-替换 从索引位置 4 开始，替换两个元素，替换的data （当三个参数第二个参数不为0时 为替换）

   splice(3个参数-插入) returnVal.splice(4, 0, data)    //splice方法-插入 从索引位置 4 开始，替换0，插入的data （当三个参数第二个参数为0时 为插入）仅支持runtime版本 2.3+
   
   根据id删除item   returnVal.deleteItem(id,number) //第一个参数是item的 id(初始化data数据必须包含id) 第二个参数是从包括id之后删除的个数

   forEach循环   returnVal.forEach(el => {el.assetTitle = '修改assetTitle'}) //循环修改每个item的值 整体更新

   for循环   for(let i= 0;i < returnVal.length; i++){if(){}} //循环更新符合条件的每个item 当筛选个别条件的item时可以使用for循环，当循环修改每个item的值时建议使用forEach循环

   重新赋值   returnVal.splice(0); returnVal.push(...data)  // 整体更新

3. 注意事项

qt-grid-viewHTML片段中type属性值要与data中的type值对应。

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

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

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