返回介绍

<list>

发布于 2020-01-01 14:27:53 字数 5441 浏览 3025 评论 0 收藏 0

简介

<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>

注意

  • 不允许相同方向的 <list> 或者 <scroller> 互相嵌套,换句话说就是嵌套的 <list> / <scroller> 必须是不同的方向。
  • <list> 需要显式的设置其宽高,可使用 position: absolute; 定位或 widthheight 设置其宽高值。

子组件

<list> 的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。

  • <cell>
    用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。Weex 会对 <cell> 进行高效的内存回收以达到更好的性能。
  • <header>
    <header> 到达屏幕顶部时,吸附在屏幕顶部。
  • <refresh>
    用于给列表添加下拉刷新的功能。
  • <loading>
    <loading> 用法与特性和 <refresh> 类似,用于给列表添加上拉加载更多的功能。

属性

属性名说明类型默认值
show-scrollbar控制是否出现滚动条booleantrue
loadmoreoffset触发 loadmore 事件所需要的垂直偏移距离(设备屏幕底部与 list 底部之间的距离),建议手动设置此值,设置大于0的值即可number0
offset-accuracy控制 onscroll 事件触发的频率:表示两次onscroll事件之间列表至少滚动了10px。注意,将该值设置为较小的数值会提高滚动事件采样的精度,但同时也会降低页面的性能number10
pagingEnabled是否按分页模式线上List,默认值falsev0.20+booleantrue/false
scrollable是否运行List关系booleantrue/false

loadmoreoffset 示意图:

事件

  • loadmore 事件
    如果列表滚动到底部将会立即触发这个事件,你可以在这个事件的处理函数中加载下一页的列表项。 如果未触发,请检查是否设置了loadmoreoffset的值,建议此值设置大于0

  • scroll 事件
    列表发生滚动时将会触发该事件,事件的默认抽样率为 10px,即列表每滚动 10px 触发一次,可通过属性 offset-accuracy 设置抽样率。

    事件中的 event 对象属性:

    • contentSize {Object}:列表的内容尺寸
      • width {number}:列表内容宽度
      • height {number}:列表内容高度
    • contentOffset {Object}:列表的偏移尺寸
      • x {number}:x轴上的偏移量
      • y {number}:y轴上的偏移量
    • isDragging {boolean}: 用户是否正在拖动列表

扩展

Vue 示例

简单示例
滑动加载
头部示例
cell appear事件

Rax 示例

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 });

rax-recyclerview 文档

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文