#<list>

list-type: 'single' | 'flow' | 'waterfall'

span-count: number

// DefaultValue: "vertical"
scroll-orientation?: 'vertical' ｜ 'horizontal'

// DefaultValue: null
item-key: string

<list-item item-key="item"/>

// DefaultValue: null
key: string

<list-item
  item-key="item-0"
  key="item-0"
/>

// DefaultValue: true
enable-scroll?: boolean

// DefaultValue: true
enable-nested-scroll?: boolean

// DefaultValue: null
list-main-axis-gap?: ${number}px | ${number}rpx

<list
  style={{listMainAxisGap:'10px'}}
/>

// DefaultValue: null
list-cross-axis-gap?: ${number}px | ${number}rpx

<list
  style={{listCrossAxisGap:'10px'}}
/>

// DefaultValue: false
sticky?: boolean

// DefaultValue: 0
sticky-offset?: number

// DefaultValue: false
sticky-top?: boolean

// DefaultValue: false
sticky-bottom?: boolean

// DefaultValue: 0
initial-scroll-index?: number

// DefaultValue: false
need-visible-item-info?: boolean

interface ListScrollInfo {
  // Horizontal scroll offset since the last scroll, in px
  deltaX: number;
  // Vertical scroll offset since the last scroll, in px
  deltaY: number;
  // Current horizontal scroll offset, in px
  scrollLeft: number;
  // Current vertical scroll offset, in px
  scrollTop: number;
  // Current content area width, in px
  scrollWidth: number;
  // Current content area height, in px
  scrollHeight: number;
  // `<list>` width, in px
  listWidth: number;
  // `<list>` height, in px
  listHeight: number;
  // Scroll event source
  eventSource: ListEventSource;
  // Position information of the currently rendering node
  attachedCells: [
    {
      id: number; // Node id
      itemKey: string; // Node item-key
      index: number; // Node index in list
      left: number; // Node left boundary position relative to list, in px
      top: number; // Node top boundary position relative to list, in px
      right: number; // Node right boundary position relative to list, in px
      bottom: number; // Node bottom boundary position relative to list, in px
    },
  ];
}

// DefaultValue: 0
upper-threshold-item-count?: number

// DefaultValue: 0
lower-threshold-item-count?: number

// DefaultValue: 200
scroll-event-throttle?: number

// defaultValue: undefined
'item-snap'?: ListItemSnapAlignment;

interface ListItemSnapAlignment {
  factor: number;
  offset: number;
}

export interface LayoutCompleteEvent extends BaseEvent<'layoutcomplete', {}> {
  detail: {
    'layout-id': number;
    // Enable need-layout-complete-info
    scrollInfo: ListScrollInfo;
    // Enable need-layout-complete-info
    diffResult?: {
      insertions: number[];
      move_from: number[];
      move_to: number[];
      removals: number[];
      update_from: number[];
      update_to: number[];
    };
    // Enable need-layout-complete-info
    visibleCellsAfterUpdate?: ListItemInfo[];
    // Enable need-layout-complete-info
    visibleCellsBeforeUpdate?: ListItemInfo[];
  };
}

// defaultValue: -1
layout-id?: number

// DefaultValue: 0
preload-buffer-count?: number

// DefaultValue: true
scroll-bar-enable?: boolean

// DefaultValue: null
reuse-identifier: string

<list>
  <list-item
    reuse-identifier="type1"
  >
  <list-item
    reuse-identifier="type2"
  >
</list>

// DefaultValue: false
full-span?: boolean
<list>
  <list-item full-span={true}/>
</list>

// DefaultValue: -1
estimated-main-axis-size-px?: number
<list-item
  estimated-main-axis-size-px={100}
/>

bindscroll?: EventHandler<ListScrollEvent>;

interface ListScrollEvent {
  // Horizontal scroll offset since the last scroll, in px
  deltaX: number;
  // Vertical scroll offset since the last scroll, in px
  deltaY: number;
  // Current horizontal scroll offset, in px
  scrollLeft: number;
  // Current vertical scroll offset, in px
  scrollTop: number;
  // Current content area width, in px
  scrollWidth: number;
  // Current content area height, in px
  scrollHeight: number;
  // `<list>` width, in px
  listWidth: number;
  // `<list>` height, in px
  listHeight: number;
  // Scroll event source
  eventSource: ListEventSource;
  // Position information of the currently rendering node
  attachedCells: [
    {
      "id": number,        // Node id
      "itemKey": string,   // Node item-key
      "index": number,     // Node index in list
      "left": number,      // Node left boundary position relative to list, in px
      "top": number,       // Node top boundary position relative to list, in px
      "right": number,     // Node right boundary position relative to list, in px
      "bottom": number,    // Node bottom boundary position relative to list, in px
    },
  ];
}

enum ListEventSource {
  DIFF = 0,
  LAYOUT = 1,
  SCROLL = 2,
}

bindscrolltoupper?: EventHandler<ListScrollEvent>;

bindscrolltolower?: EventHandler<ListScrollEvent>;

bindscrollstatechange?: EventHandler<ListScrollStateChangeEvent>;

interface ScrollStateChangeEvent extends CustomEvent {
  detail: {
    // The scroll state of this slide, value description
    //   1 - Stationary
    //   2 - Dragging
    //   3 - Inertial scrolling
    //   4 - Smooth animation scrolling
    state: number;
  };
}

bindlayoutcomplete?: EventHandler<ListLayoutFinishEvent>;

interface LayoutCompleteEvent extends BaseEvent<'layoutcomplete', {}> {
  detail: {
    'layout-id': number;
    // Enable need-layout-complete-info
    scrollInfo: ListScrollInfo;
    // Enable need-layout-complete-info
    diffResult?: {
      insertions: number[];
      move_from: number[];
      move_to: number[];
      removals: number[];
      update_from: number[];
      update_to: number[];
    };
    // Enable need-layout-complete-info
    visibleCellsAfterUpdate?: ListItemInfo[];
    // Enable need-layout-complete-info
    visibleCellsBeforeUpdate?: ListItemInfo[];
  };
}

interface ListItemInfo {
  // Child node height
  height: number;
  // Child node width
  width: number;
  // Child node itemKey
  itemKey: string;
  // Whether the child node is in rendering state
  isBinding: boolean;
  // X coordinate position of the child node relative to the entire scroll area
  originX: number;
  // Y coordinate position of the child node relative to the entire scroll area
  originY: number;
  // Whether the child node has been updated
  updated: boolean;
}

bindsnap?: EventHandler<ListSnapEvent>;

interface ListSnapEvent extends common.BaseEvent<'snap', {}> {
  detail: {
    // The index of the node that will be paginated to
    position: number;
    // Current horizontal scroll offset, in px
    currentScrollLeft: number;
    // Current vertical scroll offset, in px
    currentScrollTop: number;
    // Target horizontal scroll offset for pagination, in px
    targetScrollLeft: number;
    // Target vertical scroll offset for pagination, in px
    targetScrollTop: number;
  };
};

this.createSelectorQuery()
  .select('#id_of_list')
  .invoke({
    method: 'scrollToPosition',
    params: {
      position: 10,
      offset: 100,
      alignTo: 'top',
      smooth: true,
    },
    success: function (res) {},
    fail: function (res) {},
  })
  .exec();

this.createSelectorQuery()
  .select('#id_of_list')
  .invoke({
    method: 'autoScroll',
    params: {
      rate: string, //  The distance scrolled per second, supports positive and negative. Distance supports units "px/rpx/ppx" default->null (iOS value must be greater than 1/screen.scale px)
      start: bool, //  Start/pause auto-scrolling default->false
      autoStop: bool, // Whether to automatically stop when reaching the bottom default->true
    },
    success: function (res) {},
    fail: function (res) {},
  })
  .exec();

lynx
  .createSelectorQuery()
  .select('#id_of_list')
  .invoke({
    method: 'getVisibleCells',
    success(res) {
      console.log('succ ');
    },
    fail(res) {
      console.log('err ');
    },
  })
  .exec();

attachedCells: [
  {
    id: number, // Node id
    itemKey: string, // Node item-key
    index: number, // Node index in list
    left: number, // Node left boundary position relative to list, in px
    top: number, // Node top boundary position relative to list, in px
    right: number, // Node right boundary position relative to list, in px
    bottom: number, // Node bottom boundary position relative to list, in px
  },
];

lynx
  .createSelectorQuery()
  .select('#id_of_list')
  .invoke({
    method: 'scrollBy',
    params: {
      offset: number,
    },
    success(res) {
      console.log('succ ');
    },
    fail(res) {
      console.log('err ');
    },
  })
  .exec();

{
  "consumedX" : number,  // Distance scrolled horizontally, in px
  "consumedY" : number,  // Distance scrolled vertically, in px
  "unconsumedX" : number,  // Distance not scrolled horizontally, in px
  "unconsumedY" : number,  // Distance not scrolled vertically, in px
}

<list
  className="list-container"
  sticky={true}
  sticky-offset={50}
  list-type="single"
  span-count={1}
  scroll-orientation="vertical"
>

<list-item
  className="sticky-top-item"
  full-span={true}
  sticky-top={true}
  item-key={`list-item-${index}`}
  key={`list-item-${index}`}
/>