<list>
组件是提供垂直列表功能的核心组件,拥有平滑的滚动和高效的内存管理,非常适合用于长列表的展示。最简单的使用方法是在 <list>
标签内使用一组由简单数组循环生成的 <cell>
标签填充。
<template> <list> <cell v-for="num in lists"> <text>{{num}}</text> </cell> </list> </template> <script> export default { data () { return { lists: ['A', 'B', 'C', 'D', 'E'] } } } </script>
::: warning 注意
<list>
或者 <scroller>
互相嵌套,换句话说就是嵌套的 <list>
/ <scroller>
必须是不同的方向。<list>
需要显式的设置其宽高,可使用 position: absolute;
定位或 width
、height
设置其宽高值。 :::<list>
的子组件只能包括以下四种组件或是 fix
定位的组件,其他形式的组件将不能被正确渲染。
<cell>
<cell>
进行高效的内存回收以达到更好的性能。<header>
<header>
到达屏幕顶部时,吸附在屏幕顶部。<refresh>
<loading>
<loading>
用法与特性和 <refresh>
类似,用于给列表添加上拉加载更多的功能。loadmoreoffset
示意图:
loadmore
事件如何重置
<template> <list ref="list"> <cell v-for="num in lists"> <text>{{num}}</text> </cell> </list> </template> <script> export default { data () { return { lists: ['A', 'B', 'C', 'D', 'E'] } }, methods: { // 重置 loadmore resetLoadMore() { this.$refs["list"].resetLoadmore(); } } } </script>
scroll
事件
列表发生滚动时将会触发该事件,事件的默认抽样率为 10px,即列表每滚动 10px 触发一次,可通过属性 offset-accuracy 设置抽样率。
事件中的 event 对象属性:
contentSize {Object}
:列表的内容尺寸width {number}
:列表内容宽度height {number}
:列表内容高度contentOffset {Object}
:列表的偏移尺寸x {number}
:x轴上的偏移量y {number}
:y轴上的偏移量isDragging {boolean}
: 用户是否正在拖动列表scrollToElement(node, options)
滚动到列表某个指定项是常见需求,<list>
拓展了该功能,可通过 dom.scrollToElement()
滚动到指定 <cell>
。更多信息可参考 dom module。
相应的 demo 可参考 <scroller> 示例中的实现。
rax-recyclerview
是 <list>
组件的上层封装,抹平了 Web 和 Weex 的展现
import { createElement, Component, render } from 'rax'; import View from 'rax-view'; import Text from 'rax-text'; import Driver from "driver-universal" import RecyclerView from 'rax-recyclerview'; function Thumb() { return ( <RecyclerView.Cell> <View style={styles.button}> <View style={styles.box} /> </View> </RecyclerView.Cell> ); } let THUMBS = []; for (let i = 0; i < 20; i++) THUMBS.push(i); let createThumbRow = (val, i) => <Thumb key={i} />; function App() { return ( <View style={styles.root}> <View style={styles.container}> <RecyclerView style={{ height: 500 }}> <RecyclerView.Header> <Text>Sticky view is not header</Text> </RecyclerView.Header> <RecyclerView.Header> <View style={styles.sticky}> <Text>Sticky view must in header root</Text> </View> </RecyclerView.Header> {THUMBS.map(createThumbRow)} </RecyclerView> </View> </View> ); } let styles = { root: { width: '750rpx', }, container: { padding: '20rpx', borderStyle: 'solid', borderColor: '#dddddd', borderWidth: '1rpx', marginLeft: '20rpx', height: '1000rpx', marginRight: '20rpx', marginBottom: '10rpx', }, button: { margin: '7rpx', padding: '5rpx', alignItems: 'center', backgroundColor: '#eaeaea', borderRadius: '3rpx', }, box: { width: '64rpx', height: '64rpx', } }; render(<App />, document.body, { driver: Driver });