ant-design-vue/components/vc-virtual-list/examples/basic.jsx

/* eslint-disable no-console */
import { reactive, ref } from 'vue';

import List from '../List';
import './basic.less';

const MyItem = (_, { attrs: { id } }) => (
  <span
    // style={{
    //   // height: 30 + (id % 2 ? 0 : 10),
    // }}
    class="fixed-item"
    onClick={() => {
      console.log('Click:', id);
    }}
  >
    {id}
  </span>
);

const TestItem = {
  render() {
    return <div style={{ lineHeight: '30px' }}>{this.$attrs.id}</div>;
  },
};

const data = [];
for (let i = 0; i < 1000; i += 1) {
  data.push({
    id: String(i),
  });
}

const TYPES = [
  { name: 'ref real dom element', type: 'dom' },
  { name: 'ref vue node', type: 'vue' },
];

const onScroll = e => {
  console.log('scroll:', e.currentTarget.scrollTop);
};

const state = reactive({
  destroy: false,
  visible: true,
  type: 'dom',
});

const listRef = ref(null);
const Demo = () => {
  const { destroy, visible, type } = state;
  return (
    <div style={{ height: '200vh' }}>
      <h2>Basic</h2>
      {TYPES.map(({ name, type: nType }) => (
        <label key={nType}>
          <input
            name="type"
            type="radio"
            checked={type === nType}
            onChange={() => {
              state.type = nType;
            }}
          />
          {name}
        </label>
      ))}

      <button
        type="button"
        onClick={() => {
          listRef.value.scrollTo(100);
        }}
      >
        Scroll To 100px
      </button>
      <button
        type="button"
        onClick={() => {
          listRef.value.scrollTo({
            index: 50,
            align: 'top',
          });
        }}
      >
        Scroll To 50 (top)
      </button>
      <button
        type="button"
        onClick={() => {
          listRef.value.scrollTo({
            index: 50,
            align: 'bottom',
          });
        }}
      >
        Scroll To 50 (bottom)
      </button>
      <button
        type="button"
        onClick={() => {
          listRef.value.scrollTo({
            index: 50,
            align: 'auto',
          });
        }}
      >
        Scroll To 50 (auto)
      </button>
      <button
        type="button"
        onClick={() => {
          listRef.value.scrollTo({
            index: 50,
            align: 'top',
            offset: 15,
          });
        }}
      >
        Scroll To 50 (top) + 15 offset
      </button>
      <button
        type="button"
        onClick={() => {
          listRef.value.scrollTo({
            index: 50,
            align: 'bottom',
            offset: 15,
          });
        }}
      >
        Scroll To 50 (bottom) + 15 offset
      </button>
      <button
        type="button"
        onClick={() => {
          listRef.value.scrollTo({
            key: '50',
            align: 'auto',
          });
        }}
      >
        Scroll To key 50 (auto)
      </button>

      <button
        type="button"
        onClick={() => {
          state.visible = !state.visible;
        }}
      >
        visible
      </button>

      <button
        type="button"
        onClick={() => {
          listRef.value.scrollTo({
            index: data.length - 2,
            align: 'top',
          });
        }}
      >
        Scroll To Last (top)
      </button>
      <button
        type="button"
        onClick={() => {
          listRef.value.scrollTo({
            index: 0,
            align: 'bottom',
          });
        }}
      >
        Scroll To First (bottom)
      </button>

      <button
        type="button"
        onClick={() => {
          listRef.value.scrollTo({
            index: 50,
            align: 'top',
          });
          state.destroy = true;
        }}
      >
        Scroll To remove
      </button>

      {!destroy && (
        <List
          id="list"
          ref={listRef}
          data={data}
          height={200}
          itemHeight={20}
          itemKey="id"
          style={{
            border: '1px solid red',
            boxSizing: 'border-box',
            display: visible ? null : 'none',
          }}
          onScroll={onScroll}
          children={(item, _, props) =>
            type === 'dom' ? <MyItem {...item} {...props} /> : <TestItem {...item} {...props} />
          }
        ></List>
      )}
    </div>
  );
};

export default Demo;

/* eslint-enable */