grid-view

属性

属性	类型	默认值	必填	说明
:initPosition	Map	无	否	focusPosition：请求焦点的位置，可以不传，不传不会请求焦点；scrollToPosition：首次滚动的位置，可以不传；scrollOffset：首次滚动的偏移量，可以不传。示例如下。
:gridenBoundEvent	Boolean	false	否	是否开启view绑定监听回调,开启分页时必须设置该参数为true
:disableScrollOnFirstScreen	Boolean	false	否	是否开启列表在展示第一屏数据时切换焦点不滑动
:checkScrollOffsetOnStateChanged	Boolean	false	否	是否开启grid-view滑动事件onScrollStateChanged监听回调
:scrollEventThrottle	Int	400	否	grid-view滑动事件onScrolled监听回调间隔时间，配合onScrollEnable属性使用，单位：毫秒
:onScrollEnable	Boolean	false	否	是否开启grid-view滑动事件onScrolled监听回调
:scrollYLesserReferenceValue	Int	-1	否	grid-view向上滑动偏移量，配合onScrollEnable属性使用
:scrollYGreaterReferenceValue	Int	-1	否	grid-view向下滑动偏移量，配合onScrollEnable属性使用
:layoutTargetPosition	Int	-1	否	指定某个item更新外部定义方法，详情请见TriggerTaskModule
:makeChildVisibleType	String	"center"	否	指定某个子视图显示在屏幕中位置的类型，共分为：center：居中显示；normal：默认显示； none：只显示viewgroup矩形区域
:makeChildVisibleClampBackward	Int	0	否	焦点向下，列表上滑到屏幕中最后一个元素时的向上滑动偏移量（只有在`:makeChildVisibleType`属性不为center时有效）
:makeChildVisibleClampForward	Int	0	否	焦点向上，列表下滑到屏幕中最后一个元素时的向下滑动偏移量（只有在`:makeChildVisibleType`属性不为center时有效）
:scrollThresholdHorizontal	Int	300	否	列表水平滑动时触发item显示在屏幕正中间位置的阀值（超过阀值则触发，只有在`:makeChildVisibleType`属性为center时有效）
:scrollThresholdVertical	Int	50	否	列表垂直滑动时触发item显示在屏幕正中间位置的阀值（超过阀值则触发，只有在`:makeChildVisibleType`属性为center时有效）
:cachePool	Map	无	否	设置adapter的缓存池；示例`cachePool:{ name:"tvgrid"+Date.now(), size:{ 10000:10, } },`
:cachePoolName	String	无	否	设置当前使用缓存池名称
:focusMemory	Boolean	true	否	是否开启焦点强制移动（寻焦速度更快）
:setSelectChildPosition	Int	0	否	设置选中的子view，此属性只在view已经显示出来才有效
:shakePreCheckNumber	Int	2	否	设置列表滑动到底部触发回弹动画时的提前量（横向滑动时是滑动到最右）
:endHintEnabled	Boolean	true	否	是否开启列表回弹动画
:gridenFocusSearchOnFail	Boolean	true	否	是否开启当焦点寻焦失败时的事件回调
:enableSelectOnFocus	Boolean	true	否	是否开启指定获取焦点
:useAdvancedFocusSearch	Boolean	true	否	是否关闭recyclerView的默认焦点搜索
:enableKeepFocus	Boolean	false	否	是否开启焦点预处理
:initFocusPositionAfterLayout	Int	-1	否	设置焦点初始默认位置
:blockFocusDirections	Array	无	否	在某个方向锁住焦点
:defaultFocus	Number	无	否	初始化时默认选中焦点的位置
:loadMore	Function	无	否	开启分页的回调，接收（pageNo）根据页码处理数据 openPage为true时生效
:openPage	Boolean	false	否	是否开启分页
:pageSzie	Number	无	否	分页每页条数 openPage为true时生效
:areaWidth	Number	1200	否	当runtime版本低于2.2时需要设置宽度
:spanCount	Int	无	否	grid-view的列数

initPosition参数:

参数名	类型	说明
focusPosition	Int	焦点默认位置
scrollToPosition	Int	默认滑动位置
scrollOffset	Int	滑动偏移量

horizontal属性：切换列表为横向滑动（注意：不可动态改变此属性，竖向滑动时不需要配置此属性），类型：String

点击查看源码

html

  <qt-grid-view class="grid-view_root" horizontal="true">
      <div class="item_root1"
          type="1">
            ...  
      </div>
  </qt-grid-view>

advancedFocusSearchSpan属性：寻焦搜索范围，类型：Int

点击查看源码

html

  <qt-grid-view class="grid-view_root" advancedFocusSearchSpan="1">
       <div class="item_root1"
            type="1">
                ...  
       </div>
  </qt-grid-view>

padding属性：定义grid-view的内部间距（顺序：left,top,right,bottom) 类型：String

点击查看源码

html

  <qt-grid-view class="grid-view_root" padding="60,0,0,0">
       <div class="item_root1"
            type="1">
                ...  
       </div>
  </qt-grid-view>

方法

init(data)

初始化grid-view组件，有返回值，操作返回值更新视图

参数名	类型	说明
data	Array	列表数据集合

注意: 获取基本类型数据可以直接操作返回值使用，获取引用类型数据可以通过JSON.parse(JSON.stringify(返回值))获取；

点击查看源码

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

init返回值相关API

function	说明
push	returnVal.push({单条数据}) returnVal.push(...[多条数据])
pop	returnVal.pop() 末尾删除一条item
concat	returnVal.concat() 链接returnVal数据
splice(1个参数)	删除 returnVal.splice(1) 从第一项开始删除之后所有item
splice(2个参数)	删除 returnVal.splice(1,2) 从第1个开始删除2条item
splice(3个参数-替换)	returnVal.splice(4, 2, data) 从索引位置 4 开始，替换两个元素，替换的data （当三个参数第二个参数不为0时为替换）
splice(3个参数-插入)	returnVal.splice(4, 0, data) 从索引位置 4 开始，替换0，插入的data （当三个参数第二个参数为0时为插入）仅支持runtime版本 2.3+
deleteItem	returnVal.deleteItem(id,number) //第一个参数是item的 id(初始化data中的数据必须包含id) 第二个参数是从包括id之后删除的个数
forEach	returnVal.forEach(el => {el.assetTitle = '修改assetTitle'}) //循环修改每个item的值整体更新

scrollToTop()

列表滑动到顶部

点击查看源码

  this.$refs.grid_view.scrollToTop()

setDisplay(display)

设置列表是否显示

参数名	类型	说明
display	Boolean	是否显示

点击查看源码

  this.$refs.grid_view.setDisplay(false)

scrollToPosition(index)

滑动到指定位置

参数名	类型	说明
index	Int	要滑到的位置

点击查看源码

  this.$refs.grid_view.scrollToPosition(index)

scrollToIndex(y, anim, offsetndex)

滑动到指定位置并附带动画和偏移量

参数名	类型	说明
y	Int	要滑到的位置
anim	Boolean	是否开启动画
offsetndex	Int	偏移量

点击查看源码

  this.$refs.grid_view.scrollToIndex(y, anim, offsetndex)

setItemFocused(pos)

设置指定子Item获取焦点

参数名	类型	说明
pos	Int	子Item位置

点击查看源码

  this.$refs.grid_view.setItemFocused(pos)

setItemSelected(pos,b)

设置选中的子item,注意此方法只在view已经显示出来以后调用才有效

参数名	类型	说明
pos	Int	要选中的子View位置
b	Boolean	设置要选中的子View的焦点

点击查看源码

  this.$refs.grid_view.setItemSelected(pos, b)

stopPage()

当在分页加载完数据时，调用该方法停止分页关闭进度条样式

点击查看源码

  this.$refs.grid_view.stopPage()

事件

@item-click

Item点击事件回调

参数名	类型	说明
position	Int	点击Item的位置（在子布局里）
parentPosition	Int	点击Item的在父布局中的位置
name	String	点击Item的name类型
item	Object	当前点击item绑定的数据

@item-focused

Item焦点事件回调

参数名	类型	说明
position	Int	焦点所在Item的位置（在子布局里）
parentPosition	Int	焦点所在Item的在父布局中的位置
hasFocus	Boolean	焦点所在Item是否获得焦点
name	String	点击Item的name类型
item	Object	当前点击item绑定的数据

@item-bind

Item绑定事件回调

参数名	类型	说明
position	Int	绑定Item的位置
name	String	绑定Item的name

@item-unbind

Item解除绑定事件回调

参数名	类型	说明
position	Int	解除绑定Item的位置
name	String	解除绑定Item的name

@scroll

列表滑动onScroll事件回调

参数名	类型	说明
contentOffset	Map	滑动参数

contentOffset参数：

参数名	类型	说明
x	Float	列表滑动x轴偏移量
y	Float	列表滑动y轴偏移量

@scroll-state-changed

列表滑动onScrollStateChanged事件回调

参数名	类型	说明
contentOffset	Map	滑动参数
state	Map	滑动状态

contentOffset参数：

参数名	类型	说明
x	Float	列表滑动x轴偏移量
y	Float	列表滑动y轴偏移量

state参数：

参数名	类型	说明
oldState	Int	之前列表滑动状态
newState	Int	当前列表滑动状态

@focus-search-failed

列表寻焦失败事件回调

参数名	类型	说明
child	Map	当前焦点所在item
focused	Map	焦点将要落在item
direction	Int	滑动方向

child参数：

参数名	类型	说明
index	Int	当前item的位置
id	Int	当前item的id
name	String	当前item的name

focused参数：

参数名	类型	说明
id	Int	焦点将要落在item的id
name	String	焦点将要落在item的name

注意事项

在mounted()中使用setgridData()方法时最好加上100ms的延迟，避免view还没加载完成就加载数据导致的加载数据失败；
<grid-view>配合使用<FastItemView>和<FastFlexView>，提供更多功能；
horizontal、advancedFocusSearchSpan、padding属性不可动态改变，这三个在grid-view初始化时就确定；
要实现onItemClick和onItemFocus回调，需要在item中加上属性eventClick和eventFocus，这样才能让item响应点击和焦点事件；
:scrollThresholdHorizontal和:scrollThresholdVertical属性的生效条件是:makeChildVisibleType='center';

grid-view ​

属性 ​

方法 ​

init(data) ​

scrollToTop() ​

setDisplay(display) ​

scrollToPosition(index) ​

scrollToIndex(y, anim, offsetndex) ​

setItemFocused(pos) ​

setItemSelected(pos,b) ​

stopPage() ​

事件 ​

@item-click ​

@item-focused ​

@item-bind ​

@item-unbind ​

@scroll ​

@scroll-state-changed ​

@focus-search-failed ​

注意事项 ​

grid-view

属性

方法

init(data)

scrollToTop()

setDisplay(display)

scrollToPosition(index)

scrollToIndex(y, anim, offsetndex)

setItemFocused(pos)

setItemSelected(pos,b)

stopPage()

事件

@item-click

@item-focused

@item-bind

@item-unbind

@scroll

@scroll-state-changed

@focus-search-failed

注意事项