init

uni_modules/nutui-uni/components/list/index.scss

@@ -0,0 +1,27 @@
+.nut-list {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+
+  &-phantom {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: -1;
+  }
+
+  &-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+
+  &-item {
+    margin: $list-item-margin;
+    overflow: hidden;
+  }
+}

uni_modules/nutui-uni/components/list/index.ts

@@ -0,0 +1 @@
+export type * from './list'

uni_modules/nutui-uni/components/list/list.ts

@@ -0,0 +1,31 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, makeArrayProp, makeNumberProp } from '../_utils'
+
+export const clientHeight = uni.getSystemInfoSync().windowHeight || 667
+
+export const listProps = {
+  ...commonProps,
+  /**
+   * @description 列表项的高度/预估高度，支持不固定高度
+   */
+  height: makeNumberProp(50),
+  /**
+   * @description 列表数据
+   */
+  listData: makeArrayProp<any>([]),
+  /**
+   * @description 容器高度(最大值不能超过可视区)
+   */
+  containerHeight: makeNumberProp(clientHeight),
+}
+
+export type ListProps = ExtractPropTypes<typeof listProps>
+
+export const listEmits = {
+  // scrollUp: (val: number) => true,
+  // scrollDown: (val: number) => true,
+  scrollBottom: () => true,
+  scroll: () => true,
+}
+
+export type ListEmits = typeof listEmits

uni_modules/nutui-uni/components/list/list.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, defineComponent, reactive, watch } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass, getMainStyle, pxCheck } from '../_utils'
+import { clientHeight, listEmits, listProps } from './list'
+
+const props = defineProps(listProps)
+
+const emit = defineEmits(listEmits)
+const state = reactive({
+  startOffset: 0,
+  start: 0,
+  list: props.listData.slice(),
+})
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+
+const styles = computed(() => {
+  return getMainStyle(props, {
+    height: `${pxCheck(props.containerHeight)}`,
+  })
+})
+
+const getContainerHeight = computed(() => {
+  return Math.min(+props.containerHeight!, clientHeight)
+})
+
+const visibleCount = computed(() => {
+  return Math.ceil(getContainerHeight.value / props.height)
+})
+
+const end = computed(() => {
+  return state.start + visibleCount.value
+})
+
+const getTransform = computed(() => {
+  return `translate3d(0, ${state.startOffset}px, 0)`
+})
+
+const listHeight = computed(() => {
+  return state.list.length * props.height
+})
+
+const visibleData = computed(() => {
+  return state.list.slice(state.start, Math.min(end.value, state.list.length))
+})
+
+async function handleScrollEvent(e: any) {
+  const { scrollTop } = e.detail
+  state.start = Math.floor(scrollTop / props.height)
+  if (end.value > state.list.length)
+    emit('scrollBottom')
+  emit('scroll')
+
+  state.startOffset = scrollTop - (scrollTop % props.height)
+}
+
+watch(
+  () => props.listData,
+  () => {
+    state.list = props.listData.slice()
+  },
+)
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-list`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <scroll-view
+    :class="classes"
+    :scroll-y="true"
+    :style="styles"
+    scroll-top="0"
+    @scroll="handleScrollEvent"
+  >
+    <div
+      class="nut-list-phantom"
+      :style="{ height: `${listHeight}px` }"
+    />
+    <div
+      class="nut-list-container"
+      :style="{ transform: getTransform }"
+    >
+      <div
+        v-for="(item, index) in visibleData"
+        :id="`list-item-${Number(index + state.start)}`"
+        :key="index"
+        :style="{ height: `${height}px` }"
+        class="nut-list-item"
+      >
+        <slot :item="item" :index="index + state.start" />
+      </div>
+    </div>
+  </scroll-view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

uni_modules/nutui-uni/components/list/type.ts

@@ -0,0 +1,36 @@
+export interface CachedPosition {
+  index: number
+  top: number
+  bottom: number
+  height: number
+  dValue: number
+}
+
+export enum CompareResult {
+  eq = 1,
+  lt,
+  gt,
+}
+
+export function binarySearch<T, VT>(list: T[], value: VT, compareFunc: (current: T, value: VT) => CompareResult) {
+  let start = 0
+  let end = list.length - 1
+  let tempIndex: number | null = null
+
+  while (start <= end) {
+    tempIndex = Math.floor((start + end) / 2)
+    const midValue = list[tempIndex]
+
+    const compareRes: CompareResult = compareFunc(midValue, value)
+    if (compareRes === CompareResult.eq)
+      return tempIndex
+
+    if (compareRes === CompareResult.lt)
+      start = tempIndex + 1
+
+    else if (compareRes === CompareResult.gt)
+      end = tempIndex - 1
+  }
+
+  return tempIndex!
+}