oxy-uni-ui 1.1.0 → 1.2.3

package/components/oxy-virtual-scroll/oxy-virtual-scroll.vue

@@ -1,26 +1,44 @@
 <template>
-  <view :class="['oxy-virtual-scroll', customClass]" :style="{ height: height }">
+  <view :class="['oxy-virtual-scroll', customClass]" :style="customStyle">
     <!-- 滚动内容区域 -->
     <scroll-view
-      ref="scrollView"
+      v-if="data.length"
+      :style="{ height: height }"
       class="oxy-virtual-scroll__view"
-      :scroll-y="true"
+      :scroll-y="scrollY"
       :scroll-x="scrollX"
+      :upper-threshold="upperThreshold"
+      :lower-threshold="lowerThreshold"
       :scroll-top="scrollTop"
-      :scroll-into-view="itemId"
-      v-bind="$attrs"
+      :scroll-left="scrollLeft"
+      :scroll-with-animation="scrollWithAnimation"
+      :enable-back-to-top="enableBackToTop"
+      :show-scrollbar="showScrollbar"
+      :refresher-enabled="refresherEnabled"
+      :refresher-threshold="refresherThreshold"
+      :refresher-default-style="refresherDefaultStyle"
+      :refresher-background="refresherBackground"
+      :refresher-triggered="triggered"
+      :enable-flex="enableFlex"
+      :scroll-anchoring="scrollAnchoring"
       @scroll="onScroll"
       @scrolltoupper="onScrollUpper"
       @scrolltolower="onScrollLower"
     >
       <view class="oxy-virtual-scroll__container" :style="{ height: totalHeight + 'px' }">
         <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${virtualOffsetY}px)` }">
-          <slot name="item" v-for="(item, index) in virtualData" :item="item" :index="startIndex + index"></slot>
+          <view v-for="(item, index) in virtualData" :key="index">
+            <slot name="item" :item="item" :index="startIndex + index"></slot>
+          </view>
           <slot name="bottom"></slot>
         </view>
       </view>
     </scroll-view>
 
+    <view v-else>
+      <oxy-status-tip image="content" :tip="emptyText" />
+    </view>
+
     <!-- 回到顶部按钮 -->
     <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
       <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
@@ -40,91 +58,47 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch, nextTick } from 'vue'
+import { toRefs } from 'vue'
 import type { ScrollViewOnScrollEvent, ScrollViewOnScrolltolowerEvent, ScrollViewOnScrolltoupperEvent } from '@uni-helper/uni-app-types'
-import { VirtualScrollEngine } from './virtual-scroll'
-import { virtualScrollProps } from './types'
-defineOptions({
-  inheritAttrs: false
-})
+import { virtualScrollProps, type VirtualScrollExpose } from './types'
+import { useVirtualScroll } from '../composables/useVirtualScroll'
+
 const props = defineProps(virtualScrollProps)
 const emit = defineEmits(['scroll', 'scroll-to-upper', 'scroll-to-lower'])
 
-const scrollView = ref(null)
-const itemId = ref<string>('')
-const scrollTop = ref<number>(0)
-const showBackTopBtn = ref<boolean>(false)
-const virtualData = ref<any[]>([])
-const startIndex = ref<number>(0)
-const virtualOffsetY = ref<number>(0)
-const virtualEngine = ref<any>(null)
-
-// 显示的数据（索引处理后的）
-const displayData = computed<any[]>(() => {
-  return props.data
-})
-
-// 虚拟列表总高度
-const totalHeight = computed(() => {
-  return displayData.value.length * parseFloat(props.itemHeight) // 假设每项高度50px
-})
-
-watch(
-  () => props.data,
-  () => {
-    nextTick(initScrollData)
-  },
-  {
-    immediate: true,
-    deep: true
-  }
-)
-
-onMounted(() => {
-  initScrollEngine()
+// 解构props用于组合式函数
+const { data, virtual, height, itemHeight, idKey, showBackToTop, backToTopThreshold } = toRefs(props)
+
+// 使用虚拟滚动组合式函数
+const {
+  scrollTop,
+  showBackTopBtn,
+  virtualData,
+  startIndex,
+  virtualOffsetY,
+  totalHeight,
+  displayData,
+  initScrollData,
+  initScrollEngine,
+  updateVisibleData,
+  scrollToTop: virtualScrollToTop,
+  scrollToBottom: virtualScrollToBottom,
+  scrollToPosition: virtualScrollToPosition,
+  scrollToElement: virtualScrollToElement,
+  scrollToElementById: virtualScrollToElementById,
+  onScroll: handleVirtualScroll
+} = useVirtualScroll({
+  data,
+  virtual,
+  height,
+  itemHeight,
+  idKey,
+  backToTopThreshold
 })
 
-// 初始化滚动数据
-function initScrollData() {
-  if (!props.virtual) {
-    // 非虚拟滚动模式：直接使用全部数据
-    virtualData.value = displayData.value
-    virtualOffsetY.value = 0
-    return
-  }
-  virtualEngine.value = new VirtualScrollEngine({
-    containerHeight: parseFloat(props.height),
-    itemHeight: parseFloat(props.itemHeight),
-    data: displayData.value
-  })
-  updateVisibleData()
-}
-
-// 初始化滚动引擎
-function initScrollEngine() {
-  if (!props.virtual) return
-  virtualEngine.value = new VirtualScrollEngine({
-    containerHeight: parseFloat(props.height),
-    itemHeight: parseFloat(props.itemHeight),
-    data: displayData.value
-  })
-}
-
-// 更新可见数据
-function updateVisibleData() {
-  if (!props.virtual) return // 非虚拟模式不处理
-  if (virtualEngine.value && scrollView.value) {
-    const { visibleData, offsetY } = virtualEngine.value.updateVisibleData(scrollTop.value || 0)
-    virtualData.value = visibleData
-    virtualOffsetY.value = offsetY
-  }
-}
-
 // 滚动事件
 function onScroll(event: ScrollViewOnScrollEvent) {
-  scrollTop.value = event.detail.scrollTop
-  showBackTopBtn.value = scrollTop.value > parseFloat(props.backToTopThreshold)
-  updateVisibleData()
+  handleVirtualScroll(event.detail.scrollTop)
   emit('scroll', event)
 }
 
@@ -138,39 +112,24 @@ function onScrollLower(event: ScrollViewOnScrolltolowerEvent) {
   emit('scroll-to-lower', event)
 }
 
-// 回到顶部
-function scrollToTop() {
-  scrollTop.value = 0
-  nextTick(() => {
-    scrollTop.value = 0
-  })
+// 滚动方法
+const scrollToTop = () => {
+  virtualScrollToTop()
 }
-function scrollToBottom() {
-  scrollToPosition(totalHeight.value)
+const scrollToBottom = () => {
+  virtualScrollToBottom()
 }
-
-// 滚动到指定位置
-function scrollToPosition(position: number | string) {
-  scrollTop.value = typeof position === 'number' ? position : parseFloat(position)
+const scrollToPosition = (position: number | string) => {
+  virtualScrollToPosition(position)
 }
-
-// 滚动到指定元素
-function scrollToElement(item: any) {
-  const index = props.data.findIndex((o) => item[props.idKey] && o[props.idKey] && o[props.idKey] === item[props.idKey])
-  if (index > 0) {
-    const scrollDistance = parseFloat(props.itemHeight) * index
-    scrollToPosition(scrollDistance)
-  }
+const scrollToElement = (item: any) => {
+  virtualScrollToElement(item)
 }
-function scrollToElementById(id: string | number) {
-  const index = props.data.findIndex((o) => id && o[props.idKey] && o[props.idKey] === id)
-  if (index > 0) {
-    const scrollDistance = parseFloat(props.itemHeight) * index
-    scrollToPosition(scrollDistance)
-  }
+const scrollToElementById = (id: string | number) => {
+  virtualScrollToElementById(id)
 }
 
-defineExpose({
+defineExpose<VirtualScrollExpose>({
   scrollToTop,
   scrollToBottom,
   scrollToPosition,

package/components/oxy-virtual-scroll/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeRequiredProp, makeBooleanProp, makeStringProp } from '../common/props'
+import { baseProps, makeRequiredProp, makeBooleanProp, makeStringProp, makeNumericProp, makeNumberProp } from '../common/props'
 
 export const virtualScrollProps = {
   ...baseProps,
@@ -37,15 +37,105 @@ export const virtualScrollProps = {
   /**
    * 单个项目高度
    * 类型：number
-   * 默认值：'50px'
+   * 默认值：'44px'
    */
-  itemHeight: makeStringProp('50px'),
+  itemHeight: makeStringProp('44px'),
   /**
    * 是否开启水平滚动
    * 类型：boolean
    * 默认值：false
    */
   scrollX: makeBooleanProp(false),
+  /**
+   * 是否开启纵向滚动
+   * 类型：boolean
+   * 默认值：true
+   */
+  scrollY: makeBooleanProp(true),
+  /**
+   * 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
+   * 类型：number | string
+   * 默认值：50
+   */
+  upperThreshold: makeNumericProp(50),
+  /**
+   * 距底部/右边多远时（单位px），触发 scrolltolower 事件
+   * 类型：number | string
+   * 默认值：50
+   */
+  lowerThreshold: makeNumericProp(50),
+  /**
+   * 设置横向滚动条位置
+   * 类型：number | string
+   * 默认值：0
+   */
+  scrollLeft: makeNumericProp(0),
+  /**
+   * 是否在设置滚动条位置时使用滚动动画
+   * 类型：boolean
+   * 默认值：false
+   */
+  scrollWithAnimation: makeBooleanProp(false),
+  /**
+   * iOS/Android 返回顶部功能，竖向有效
+   * 类型：boolean
+   * 默认值：false
+   */
+  enableBackToTop: makeBooleanProp(false),
+  /**
+   * 控制是否出现滚动条（App-nvue 有效）
+   * 类型：boolean
+   * 默认值：true
+   */
+  showScrollbar: makeBooleanProp(true),
+  /**
+   * 开启自定义下拉刷新
+   * 类型：boolean
+   * 默认值：false
+   */
+  refresherEnabled: makeBooleanProp(false),
+  /**
+   * 设置自定义下拉刷新阈值
+   * 类型：number
+   * 默认值：45
+   */
+  refresherThreshold: makeNumberProp(45),
+  /**
+   * 设置自定义下拉刷新默认样式
+   * 类型：'black' | 'white' | 'none'
+   * 默认值：'black'
+   */
+  refresherDefaultStyle: makeStringProp<'black' | 'white' | 'none'>('black'),
+  /**
+   * 设置自定义下拉刷新区域背景颜色
+   * 类型：string
+   * 默认值：'#FFF'
+   */
+  refresherBackground: makeStringProp('#FFF'),
+  /**
+   * 设置当前下拉刷新状态
+   * 类型：boolean
+   * 默认值：false
+   */
+  triggered: makeBooleanProp(false),
+  /**
+   * 启用 flexbox 布局
+   * 类型：boolean
+   * 默认值：false
+   */
+  enableFlex: makeBooleanProp(false),
+  /**
+   * 开启 scroll anchoring 特性
+   * 类型：boolean
+   * 默认值：false
+   */
+  scrollAnchoring: makeBooleanProp(false),
+  /**
+   * 暂无数据时的提示问题
+   * 类型：string
+   * 默认值：'暂无数据'
+   */
+  emptyText: makeStringProp('暂无数据'),
   /**
    * 是否开启虚拟滚动
    * 类型：boolean
@@ -54,7 +144,7 @@ export const virtualScrollProps = {
   virtual: makeBooleanProp(true)
 }
 
-export type CollapseExpose = {
+export type VirtualScrollExpose = {
   scrollToTop: () => void
   scrollToBottom: () => void
   scrollToPosition: (position: number | string) => void
@@ -62,4 +152,4 @@ export type CollapseExpose = {
   scrollToElementById: (id: string | number) => void
 }
 export type VirtualScrollProps = ExtractPropTypes<typeof virtualScrollProps>
-export type VirtualScrollInstance = ComponentPublicInstance<VirtualScrollProps, CollapseExpose>
+export type VirtualScrollInstance = ComponentPublicInstance<VirtualScrollProps, VirtualScrollExpose>

package/components/oxy-waterfall/index.scss

@@ -0,0 +1,18 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(waterfall) {
+  overflow: hidden;
+  @include e(wrapper) {
+    height: 100%;
+    overflow: hidden;
+  }
+  @include e(container) {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+  }
+  @include e(column) {
+    flex: 1;
+  }
+}

package/components/oxy-waterfall/oxy-waterfall.vue

@@ -0,0 +1,218 @@
+<template>
+  <view :class="`oxy-waterfall ${customClass}`" :style="waterfallStyle">
+    <scroll-view
+      class="oxy-waterfall__wrapper"
+      :scroll-y="true"
+      :refresher-enabled="refresherEnabled"
+      :refresher-triggered="triggered"
+      @scroll="handleScroll"
+      @scrolltolower="handleScrolltolower"
+      @refresherrefresh="handleRefresherrefresh"
+    >
+      <view class="oxy-waterfall__container" :style="`${containerStyle}`">
+        <view v-for="(column, index) in columns" :key="index" class="oxy-waterfall__column" :style="index ? `${columnStyle}` : ''">
+          <oxy-waterfall-item
+            v-for="(item, cindex) in column"
+            :key="item[idKey]"
+            :col-index="index"
+            :custom-style="cindex ? `${itemStyle}` : ''"
+            :report-height-time="item.reportHeightTime"
+            @height="reportHeight"
+          >
+            <slot name="item" :item="item" :col-index="index" :item-index="cindex"></slot>
+          </oxy-waterfall-item>
+        </view>
+      </view>
+      <slot name="bottom">
+        <oxy-loadmore
+          v-if="loadmoreState"
+          :state="loadmoreState"
+          :loading-text="loadingText"
+          :finished-text="finishedText"
+          :error-text="errorText"
+          :loading-props="loadingProps"
+          @reload="onReload"
+        />
+      </slot>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-waterfall',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import type { ScrollViewOnRefresherrefreshEvent, ScrollViewOnScrollEvent } from '@uni-helper/uni-app-types/index'
+import { objToStyle, isDef, addUnit } from '../common/util'
+import { computed, ref, watch, nextTick } from 'vue'
+import { waterfallProps } from './types'
+
+const emit = defineEmits(['scroll', 'scroll-to-lower', 'refresh', 'reload'])
+
+const props = defineProps(waterfallProps)
+
+const columns = ref<any>([])
+const loadedIndex = ref(0)
+const columnHeights = ref<any>([])
+
+watch(
+  () => props.data,
+  () => {
+    loadColumn()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.triggered,
+  (val) => {
+    if (val) {
+      loadedIndex.value = 0
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+function loadColumn() {
+  if (!loadedIndex.value || !columns.value.length) {
+    clearColumn()
+    columns.value = Array(props.columnCount)
+      .fill(null)
+      .map(() => [])
+    columnHeights.value = Array(props.columnCount)
+      .fill(null)
+      .map(() => 0)
+  }
+  nextTick(() => {
+    addRenderData()
+  })
+}
+
+function addRenderData() {
+  if (loadedIndex.value > props.data.length - 1) return
+  const current = props.data[loadedIndex.value]
+  pushRender(current)
+  loadedIndex.value += 1
+}
+
+function pushRender(data: Record<string, any>) {
+  const columnIndex = findSmallColIndex()
+  columns.value[columnIndex].push({
+    ...data,
+    reportHeightTime: Date.now()
+  })
+}
+
+function findSmallColIndex() {
+  let col = 0
+  let size = columnHeights.value[col]
+  columnHeights.value.forEach((item: number, index: number) => {
+    if (item < size) {
+      col = index
+      size = item
+    }
+  })
+  return col
+}
+
+function reportHeight(params: any) {
+  const { colIndex, height, reportHeightTimeChange } = params
+  columnHeights.value[colIndex] += height
+
+  if (reportHeightTimeChange) {
+    return
+  }
+
+  addRenderData()
+}
+
+// 更新
+const update = (params: any) => {
+  const { colIndex, itemIndex, data = {}, reportHeight = false } = params
+  const item = columns.value[colIndex][itemIndex]
+  Object.keys(data).forEach((k) => {
+    item[k] = data[k]
+  })
+  // 当需要重新上报高度时，更新渲染时间
+  if (reportHeight) {
+    item.reportHeightTime = Date.now()
+  }
+}
+
+function clearColumn() {
+  loadedIndex.value = 0
+  columns.value = []
+  columnHeights.value = []
+}
+
+const waterfallStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (isDef(props.height)) {
+    style['height'] = addUnit(props.height)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const containerStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.leftGap) {
+    style['padding-left'] = addUnit(props.leftGap)
+  }
+  if (props.rightGap) {
+    style['padding-right'] = addUnit(props.rightGap)
+  }
+  return objToStyle(style)
+})
+
+const columnStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.columnGap) {
+    style['margin-left'] = addUnit(props.columnGap)
+  }
+  return objToStyle(style)
+})
+
+const itemStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.columnGap) {
+    style['margin-top'] = addUnit(props.columnGap)
+  }
+  return objToStyle(style)
+})
+
+const handleScroll = (event: ScrollViewOnScrollEvent) => {
+  emit('scroll', event)
+}
+
+const handleScrolltolower = () => {
+  emit('scroll-to-lower')
+}
+
+const handleRefresherrefresh = (e: ScrollViewOnRefresherrefreshEvent) => {
+  emit('refresh', e)
+}
+
+const onReload = () => {
+  emit('reload')
+}
+
+defineExpose({
+  update
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-waterfall/types.ts

@@ -0,0 +1,90 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeRequiredProp, makeStringProp, makeNumberProp, numericProp, makeBooleanProp } from '../common/props'
+import { type LoadMoreState } from '../oxy-loadmore/types'
+import { type LoadingProps } from '../oxy-loading/types'
+
+export const waterfallProps = {
+  ...baseProps,
+
+  /**
+   * 瀑布流数据
+   * 类型：array
+   */
+  data: makeRequiredProp(Array<Record<string, any>>),
+
+  /**
+   * 数据的唯一标识
+   * 类型：string
+   * 默认值：'id'
+   */
+  idKey: makeStringProp('id'),
+
+  /**
+   * 容器的高度
+   */
+  height: numericProp,
+
+  /**
+   * 瀑布流的列数
+   * 类型：number
+   * 默认值：2
+   */
+  columnCount: makeNumberProp(2),
+
+  /**
+   * 列与列的间隙
+   * 类型：number
+   * 默认值：20
+   */
+  columnGap: makeNumberProp(20),
+
+  /**
+   * 左边和列表的间隙
+   * 类型：number
+   * 默认值：0
+   */
+  leftGap: makeNumberProp(0),
+
+  /**
+   * 右边和列表的间隙
+   * 类型：number
+   * 默认值：0
+   */
+  rightGap: makeNumberProp(0),
+
+  /**
+   * 开启下拉刷新
+   * 类型：boolean
+   * 默认值：false
+   */
+  refresherEnabled: makeBooleanProp(false),
+
+  /**
+   * 下拉刷新状态
+   * 类型：boolean
+   * 默认值：false
+   */
+  triggered: makeBooleanProp(false),
+
+  loadmoreState: String as PropType<LoadMoreState | ''>,
+
+  /**
+   * 加载提示文案
+   */
+  loadingText: String,
+  /**
+   * 全部加载完的提示文案
+   */
+  finishedText: String,
+  /**
+   * 加载失败的提示文案
+   */
+  errorText: String,
+  /**
+   * 加载中loading组件的属性
+   * 参考loading组件
+   */
+  loadingProps: Object as PropType<Partial<LoadingProps>>
+}
+
+export type WaterfallProps = ExtractPropTypes<typeof waterfallProps>

package/components/oxy-waterfall-item/index.scss

@@ -0,0 +1,8 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(waterfall-item) {
+  width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}