init

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

@@ -0,0 +1,46 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, isNumber, isString, makeArrayProp, makeNumberProp, makeNumericProp, makeStringProp } from '../_utils'
+import type { ElevatorData } from './type'
+
+export const elevatorProps = {
+  ...commonProps,
+  /**
+   * @description 电梯区域的高度
+   */
+  height: makeNumericProp('200px'),
+
+  /**
+   * @description 索引 key 值
+   */
+  acceptKey: makeStringProp('title'),
+
+  /**
+   * @description 索引列表
+   */
+  indexList: makeArrayProp<ElevatorData>([]),
+
+  /**
+   * @description 索引是否吸顶
+   */
+  isSticky: Boolean,
+
+  /**
+   * @description 右侧锚点的上下间距
+   */
+  spaceHeight: makeNumberProp(23),
+
+  /**
+   * @description 左侧索引的高度
+   */
+  titleHeight: makeNumberProp(35),
+}
+
+export type ElevatorProps = ExtractPropTypes<typeof elevatorProps>
+
+export const elevatorEmits = {
+  clickItem: (key: string, item: any) => isString(key) && (item instanceof Object),
+  clickIndex: (key: string) => isString(key),
+  change: (val: number) => isNumber(val),
+}
+
+export type ElevatorEmits = typeof elevatorEmits

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

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import type { ComponentInternalInstance } from 'vue'
+import { computed, defineComponent, getCurrentInstance, nextTick, onMounted, reactive, toRefs, watch } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import { elevatorEmits, elevatorProps } from './elevator'
+import type { ElevatorData } from './type'
+
+const props = defineProps(elevatorProps)
+
+const emit = defineEmits(elevatorEmits)
+
+const instance = getCurrentInstance() as ComponentInternalInstance
+
+defineExpose({
+  scrollTo,
+})
+const spaceHeight = 23
+
+const state = reactive({
+  anchorIndex: 0,
+  codeIndex: 0,
+  listHeight: [] as number[],
+  listGroup: [] as HTMLLIElement[],
+  touchState: {
+    y1: 0,
+    y2: 0,
+  },
+  scrollStart: false,
+  currentIndex: 0,
+  query: uni.createSelectorQuery(),
+  scrollTop: 0,
+  currentData: {} as ElevatorData,
+  currentKey: '',
+  scrollY: 0,
+})
+
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+
+// const fixedStyle = computed(() => {
+//   return {
+//     pointerEvents: 'none',
+//     height: `${state.listHeight[state.listGroup.length - 1]}px`,
+//   } as CSSProperties
+// })
+
+function getData(el: HTMLElement): string | void {
+  if (!el.dataset.index)
+    return '0'
+
+  return el.dataset.index as string
+}
+
+function setListGroup(el: any) {
+  nextTick(() => {
+    if (!state.listGroup.includes(el) && el != null)
+      state.listGroup.push(el)
+  })
+}
+
+function queryItemHeight(index: number) {
+  return new Promise((resolve) => {
+    uni.createSelectorQuery()
+      .in(instance)
+      .selectAll(`#elevator__item__${index}`)
+      .boundingClientRect((res: any) => {
+        resolve(res)
+      })
+      .exec()
+  })
+}
+
+async function calculateHeight() {
+  state.listHeight = []
+  let height = 0
+  state.listHeight.push(height)
+  try {
+    const nodeList: any = await Promise.all(
+      state.listGroup.map(async (_, index) => {
+        return await queryItemHeight(index)
+      }),
+    )
+    nodeList.forEach((_: any, index: number) => {
+      height += Math.floor((nodeList[index][0] as any).height)
+      state.listHeight.push(height)
+    })
+  }
+  catch (err) {
+    state.listHeight = [0]
+    throw err
+  }
+}
+
+function scrollTo(index: number) {
+  if (!index && index !== 0)
+    return
+
+  if (index < 0)
+    index = 0
+  if (index > state.listHeight.length - 2)
+    index = state.listHeight.length - 2
+  state.codeIndex = index
+  state.scrollTop = state.listHeight[index]
+}
+
+function touchStart(e: TouchEvent) {
+  state.scrollStart = true
+  const index = getData(e.target as HTMLElement)
+  const firstTouch = e.touches[0]
+  state.touchState.y1 = firstTouch.pageY
+  state.anchorIndex = +index
+  state.codeIndex = +index
+  scrollTo(+index)
+}
+
+function touchMove(e: TouchEvent) {
+  const firstTouch = e.touches[0]
+  state.touchState.y2 = firstTouch.pageY
+  const delta = ((state.touchState.y2 - state.touchState.y1) / spaceHeight) | 0
+  state.codeIndex = state.anchorIndex + delta
+  scrollTo(state.currentIndex)
+}
+
+function touchEnd() {
+  state.scrollStart = false
+}
+
+function handleClickItem(key: string, item: ElevatorData) {
+  emit('clickItem', key, item)
+  state.currentData = item
+  state.currentKey = key
+}
+
+function handleClickIndex(key: string) {
+  emit('clickIndex', key)
+}
+
+function listViewScroll(e: any) {
+  const target = e.detail as Element
+  const scrollTop = target.scrollTop
+  const listHeight = state.listHeight
+  state.scrollY = Math.floor(scrollTop)
+  for (let i = 0; i < state.listHeight.length - 1; i++) {
+    const height1 = listHeight[i]
+    const height2 = listHeight[i + 1]
+
+    if (state.scrollY >= height1 && state.scrollY < height2) {
+      state.currentIndex = i
+      return
+    }
+  }
+}
+
+function queryItemHeightFields(index: number) {
+  return new Promise((resolve) => {
+    const query = uni.createSelectorQuery()
+      .in(instance)
+      .select(`#elevator__item__${index}`)
+    query.fields({
+      size: true,
+      scrollOffset: true,
+      rect: true,
+      id: true,
+    }, (data) => {
+      resolve(data)
+    }).exec()
+  })
+}
+
+onMounted(async () => {
+  try {
+    await Promise.all(
+      props.indexList.map(async (_, index) => {
+        const data = await queryItemHeightFields(index)
+        setListGroup(data)
+      }),
+    )
+    calculateHeight()
+  }
+  catch (err) {
+    calculateHeight()
+    throw err
+  }
+})
+
+watch(
+  () => state.currentIndex,
+  (newVal: number) => {
+    emit('change', newVal)
+  },
+)
+
+const { scrollTop, scrollY, currentIndex, scrollStart, codeIndex, currentData, currentKey } = toRefs(state)
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-elevator`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle">
+    <scroll-view
+      id="listview"
+      class="nut-elevator__list nut-elevator__list--mini"
+      :scroll-top="scrollTop"
+      :scroll-y="true"
+      :scroll-with-animation="true"
+      :scroll-anchoring="true"
+      :style="{ height: isNaN(+height) ? height : `${height}px` }"
+      @scroll="listViewScroll"
+    >
+      <view id="elevator__item-wrap">
+        <view
+          v-for="(item, index) in indexList"
+          :id="[`elevator__item__${index}`]"
+          :key="item[acceptKey]"
+          class="nut-elevator__list__item"
+        >
+          <view class="nut-elevator__list__item__code">
+            {{ item[acceptKey] }}
+          </view>
+          <view
+            v-for="subitem in item.list"
+            :key="subitem.id"
+            class="nut-elevator__list__item__name"
+            :class="{
+              'nut-elevator__list__item__name--highcolor': currentData.id === subitem.id && currentKey === item[acceptKey],
+            }"
+            @click="handleClickItem(item[acceptKey], subitem)"
+          >
+            <rich-text v-if="!$slots.default" :nodes="subitem.name" />
+            <slot v-else :item="subitem" />
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+    <view class="nut-elevator__list__fixed" :class="{ 'nut-hidden': !(scrollY > 2 && isSticky) }">
+      <view class="nut-elevator__list__fixed-title">
+        {{ indexList[currentIndex][acceptKey] }}
+      </view>
+    </view>
+    <view v-if="indexList.length > 0" class="nut-elevator__code--current" :class="{ 'nut-hidden': !scrollStart }">
+      {{ indexList[codeIndex][acceptKey] }}
+    </view>
+    <view
+      class="nut-elevator__bars"
+      @touchstart="(touchStart as any)"
+      @touchmove.stop.prevent="(touchMove as any)"
+      @touchend="touchEnd"
+    >
+      <view class="nut-elevator__bars__inner">
+        <view
+          v-for="(item, index) in indexList"
+          :key="item[acceptKey]"
+          class="nut-elevator__bars__inner__item"
+          :class="{ active: item?.[acceptKey] === indexList?.[currentIndex]?.[acceptKey] }"
+          :data-index="index"
+          @click="handleClickIndex(item[acceptKey])"
+        >
+          {{ item[acceptKey] }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

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

@@ -0,0 +1,134 @@
+.nut-theme-dark {
+  .nut-elevator {
+    background-color: $dark-background2;
+
+    &__list {
+      &__item {
+        color: $dark-color;
+
+        &__code {
+          color: $dark-color;
+
+          &::after {
+            background-color: $dark-background7;
+          }
+        }
+      }
+
+      &__fixed {
+        background-color: $dark-background2;
+      }
+    }
+
+    &__bars {
+      background-color: $dark-background;
+    }
+  }
+}
+
+.nut-elevator {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  &__list {
+    position: relative;
+    display: block;
+    overflow: auto;
+
+    &__item {
+      display: block;
+      font-size: $elevator-list-item-font-size;
+      color: $elevator-list-item-font-color;
+
+      &__code {
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        height: $elevator-list-item-code-height;
+        padding: $elevator-list-item-code-padding;
+        font-size: $elevator-list-item-code-font-size;
+        font-weight: $elevator-list-item-code-font-weight;
+        line-height: $elevator-list-item-code-line-height;
+        color: $elevator-list-item-code-font-color;
+
+        &::after {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: $elevator-list-item-code-after-width;
+          height: $elevator-list-item-code-after-height;
+          content: "";
+          background-color: $elevator-list-item-code-after-bg-color;
+        }
+      }
+
+      &__name {
+        display: flex;
+        align-items: center;
+        height: $elevator-list-item-name-height;
+        padding: $elevator-list-item-name-padding;
+        line-height: $elevator-list-item-name-line-height;
+
+        &--highcolor {
+          color: $elevator-list-item-highcolor;
+        }
+      }
+    }
+
+    &__fixed {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      box-sizing: border-box;
+      width: 100%;
+      height: $elevator-list-item-code-height;
+      padding: $elevator-list-item-code-padding;
+      font-size: $elevator-list-item-code-font-size;
+      font-weight: $elevator-list-item-code-font-weight;
+      line-height: $elevator-list-item-code-line-height;
+      color: $elevator-list-fixed-color;
+      background-color: $elevator-list-fixed-bg-color;
+      box-shadow: $elevator-list-fixed-box-shadow;
+    }
+  }
+
+  &__code--current {
+    position: $elevator-list-item-code-current-position;
+    top: $elevator-list-item-code-current-top;
+    right: $elevator-list-item-code-current-right;
+    width: $elevator-list-item-code-current-width;
+    height: $elevator-list-item-code-current-height;
+    line-height: $elevator-list-item-code-current-line-height;
+    text-align: $elevator-list-item-code-current-text-align;
+    background: $elevator-list-item-code-current-bg-color;
+    border-radius: $elevator-list-item-code-current-border-radius;
+    box-shadow: $elevator-list-item-code-current-box-shadow;
+    transform: $elevator-list-item-code-current-transform;
+  }
+
+  &__bars {
+    position: $elevator-list-item-bars-position;
+    top: $elevator-list-item-bars-top;
+    right: $elevator-list-item-bars-right;
+    z-index: $elevator-list-item-bars-z-index;
+    padding: $elevator-list-item-bars-padding;
+    text-align: $elevator-list-item-bars-text-align;
+    background-color: $elevator-list-item-bars-background-color;
+    border-radius: $elevator-list-item-bars-border-radius;
+    transform: $elevator-list-item-bars-transform;
+
+    &__inner {
+      &__item {
+        display: block;
+        padding: $elevator-list-item-bars-inner-item-padding;
+        font-size: $elevator-list-item-bars-inner-item-font-size;
+
+        &.active {
+          color: $elevator-list-item-bars-inner-item-active-color;
+        }
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,9 @@
+export interface ElevatorData {
+  name?: string
+  id?: number | string
+  [key: string]: any
+}
+
+export interface ElevatorInst {
+  scrollTo: (val: number) => void
+}