Skip to content

列表中的焦点

sdk>=2.8

qt-list-viewqt-grid-view列表组件因其特殊实现方式,实现自动获焦的方式有所不同。

指定初始获焦位置

通过指定autofocusPosition属性,当其值>=0时,列表在初始化、可见性变化、重设数据时都会自动另对应position的子元素获焦;

html
<!--list-view中第0个元素展现时将自动获焦-->
<qt-list-view :autofocusPosition="0">
    <!-- 子无素可直接获焦 -->
    <div :type="1" :focusable="true"></div>
    <!-- 也支持元素内部获焦 -->      
    <div :type="2" :focusable="false">
        <div focusable="true"></div>
    </div>
</qt-list-view>

自动滚动并获焦

当前列表创建完成时,有可能指定位置的元素不在可视区域内,此时如指定了autofocusPosition列表将自动滚动并获焦。 下例中,页面中只展示三个元素,希望初始时第5个元素获焦:

html
<!--list-view中第5个元素展现时将自动获焦-->
<qt-list-view :autofocusPosition="4"></qt-list-view>

取消自动获焦

当列表中的元素不需要自动获焦时,可以通过autofocusPosition属性设置为-1来取消自动获焦。

html
<qt-list-view :autofocusPosition="autofocusPosition" 
              :autoscroll="[scrollPosition,0]">
js
autofocusPosition = -1;
//如设置了滚动,也可能通过设成-1取消
scrollPosition = -1;

更多列表中的自动焦点用法请查看es-auto-focus-list-demo