hy-app 0.5.7 → 0.5.8

package/components/hy-float-button/hy-float-button.vue

@@ -79,7 +79,7 @@ import { computed, getCurrentInstance, onMounted, ref, reactive, watch } from 'v
 import type { CSSProperties } from 'vue'
 import type { IFloatButtonEmits } from './typing'
 import type { MenusType } from './typing'
-import { addUnit, getPx, getRect, guid, isH5 } from '../../libs'
+import { addUnit, debounce, getPx, getRect, guid, isH5, throttle } from '../../libs'
 import floatButtonProps from './props'
 // 组件
 import HyIcon from '../hy-icon/hy-icon.vue'
@@ -133,7 +133,7 @@ watch(
 )
 
 /**
- * @description 初始化距离
+ * 初始化距离
  * */
 const initPosition = () => {
     const { minLeft, minTop, maxLeft, maxTop } = bounding
@@ -193,7 +193,7 @@ const initPosition = () => {
 }
 
 /**
- * @description 获取组件大小
+ * 获取组件大小
  * */
 const getFloatBtnSize = computed(() => {
     if (typeof props.size === 'string' && Object.keys(btnSize).includes(props.size)) {
@@ -204,16 +204,15 @@ const getFloatBtnSize = computed(() => {
 })
 
 /**
- * @description 悬浮按钮样式
+ * 悬浮按钮样式
  * */
 const FloatButtonStyle = computed(() => {
     const style: CSSProperties = {
-        top: currentCoordinate.top + 'px',
-        left: currentCoordinate.left + 'px',
+        top: `${currentCoordinate.top}px`,
+        left: `${currentCoordinate.left}px`,
         backgroundColor: props.bgColor,
         zIndex: props.zIndex,
-        color: props.textColor,
-        transition: 'all ease 0.3s'
+        color: props.textColor
     }
     if (props.fixed) style.position = 'fixed'
 
@@ -267,7 +266,7 @@ const menusStyle = computed(() => {
 })
 
 /**
- * @description 获取悬浮按钮大小
+ * 获取悬浮按钮大小
  * */
 const getFatRect = () => {
     return new Promise((resolve, reject) => {
@@ -285,7 +284,7 @@ const getFatRect = () => {
 }
 
 /**
- * @description 点击悬浮按钮
+ * 点击悬浮按钮
  * */
 const handleClick = () => {
     emit('click')
@@ -295,7 +294,7 @@ const handleClick = () => {
 }
 
 /**
- * @description 点击单条菜单栏
+ * 点击单条菜单栏
  * */
 const handleMenuItemClick = (temp: MenusType, index: number) => {
     emit('clickItem', temp, index)

package/components/hy-float-button/index.scss

@@ -14,18 +14,18 @@
     box-shadow: $hy-box-shadow;
   }
 
-  @include e(animation) {
-    animation: floatAnimation 2s ease-in-out infinite;
-    @keyframes floatAnimation {
-      0%,
-      100% {
-        transform: translateY(0); /* 初始位置 */
-      }
-      50% {
-        transform: translateY(-20px); /* 上浮20像素 */
-      }
-    }
-  }
+  //@include e(animation) {
+  //  animation: floatAnimation 2s ease-in-out infinite;
+  //  @keyframes floatAnimation {
+  //    0%,
+  //    100% {
+  //      transform: translateY(0); /* 初始位置 */
+  //    }
+  //    50% {
+  //      transform: translateY(-20px); /* 上浮20像素 */
+  //    }
+  //  }
+  //}
 
   @include e(container) {
     border-radius: 50%;

package/components/hy-input/hy-input.vue

@@ -152,7 +152,6 @@ watch(
             changeFromInner.value = false
             return
         }
-        console.log(newVal, 'newVal')
         innerValue.value = newVal
         // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
         if (!firstChange.value && !changeFromInner.value) {

package/components/hy-rolling-num/README.md

@@ -0,0 +1,137 @@
+# hy-rolling-num 滚动数字组件
+
+## 介绍
+
+滚动数字组件，用于实现数字从初始值（全0）平滑滚动到目标值的动画效果。当数字变化时，会先显示与目标值长度相同的全0字符串，然后通过平滑的滚动动画过渡到目标值。
+
+## 特性
+
+- 支持自定义数字大小、颜色、字体粗细
+- 支持设置滚动方向（向上、向下、交替）
+- 支持设置动画持续时间和延迟步进
+- 自动根据目标值长度生成对应长度的初始值（全0）
+- 支持特殊字符（非数字字符会直接显示，不会参与滚动）
+
+## 使用方法
+
+### 基本用法
+
+```vue
+<template>
+  <view class="demo">
+    <hy-rolling-num :value="num" :size="'48rpx'" :color="'#1989fa'" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import HyRollingNum from '@/package/components/hy-rolling-num/hy-rolling-num.vue';
+
+// 初始值为0，当更新为234564时，会先显示000000然后滚动到234564
+const num = ref(234564);
+</script>
+```
+
+### 自定义配置
+
+```vue
+<hy-rolling-num 
+  :value="num" 
+  :size="'36rpx'" 
+  :color="'#ff6b6b'"
+  :font-weight="'bold'"
+  :duration="2"
+  :scroll-direction="'down'"
+  :stop-order="'right-to-left'"
+  :delay-step="0.15"
+/>
+```
+
+## Props
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| value | number \| string | 0 | 要显示的数字或字符串值 |
+| size | string | '32rpx' | 数字字体大小 |
+| color | string | '#333' | 数字颜色 |
+| fontWeight | string \| number | 'normal' | 字体粗细 |
+| height | string | '40rpx' | 单个数字的高度 |
+| duration | number | 1.5 | 滚动动画持续时间（秒） |
+| letterSpacing | string | '0' | 数字间距 |
+| scrollDirection | 'up' \| 'down' \| 'alternate' | 'up' | 滚动方向：向上、向下或交替 |
+| stopOrder | 'left-to-right' \| 'right-to-left' | 'left-to-right' | 滚动停止顺序：从左到右或从右到左 |
+| delayStep | number | 0.1 | 每个数字滚动的延迟时间间隔（秒） |
+| customStyle | CSSProperties | {} | 自定义样式对象 |
+
+## 示例
+
+### 示例1：基本滚动效果
+
+```vue
+<template>
+  <view>
+    <text>滚动数字：</text>
+    <hy-rolling-num :value="234564" />
+    <!-- 会先显示 000000，然后滚动到 234564 -->
+  </view>
+</template>
+```
+
+### 示例2：改变数字长度
+
+```vue
+<template>
+  <view>
+    <button @click="changeValue(234)">显示 234</button>
+    <button @click="changeValue(987654321)">显示 987654321</button>
+    <hy-rolling-num :value="displayValue" />
+    <!-- 点击第一个按钮：显示 000 -> 234 -->
+    <!-- 点击第二个按钮：显示 000000000 -> 987654321 -->
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const displayValue = ref(0);
+
+const changeValue = (val: number) => {
+  displayValue.value = val;
+};
+</script>
+```
+
+### 示例3：自定义滚动方向和动画
+
+```vue
+<template>
+  <view>
+    <hy-rolling-num 
+      :value="num" 
+      :scroll-direction="'alternate'" 
+      :duration="1.2"
+      :delay-step="0.08"
+    />
+    <!-- 交替方向滚动，奇偶位滚动方向相反 -->
+  </view>
+</template>
+```
+
+## 注意事项
+
+1. 组件会自动根据传入的 `value` 长度生成对应长度的全0初始值
+2. 当 `value` 为字符串时，非数字字符会直接显示，不会参与滚动动画
+3. 滚动动画的实现依赖于CSS的transform属性，确保在支持该属性的环境中使用
+4. 动画延迟时间总和不宜过长，以免影响用户体验
+5. 当需要频繁更新数字时，建议控制更新频率，避免动画效果过于密集
+
+## 常见问题
+
+### Q: 为什么数字变化时会先显示全0？
+A: 这是组件的设计特性，用于实现从初始状态到目标状态的滚动动画效果，增强视觉体验。
+
+### Q: 如何调整滚动速度？
+A: 通过调整 `duration` 属性可以控制整个滚动动画的持续时间，数值越小，滚动越快。
+
+### Q: 特殊字符会如何显示？
+A: 非数字字符（如小数点、货币符号等）会直接显示，不会参与滚动动画。

package/components/hy-rolling-num/hy-rolling-num.vue

@@ -0,0 +1,198 @@
+<template>
+    <view :class="['hy-rolling-num', customClass]" :style="containerStyle">
+        <view
+            v-for="(item, index) in renderList"
+            :key="index"
+            class="hy-rolling-num__column"
+            :style="{ height: addUnit(height), marginRight: letterSpacing }"
+        >
+            <view
+                v-if="item.isDigit"
+                class="hy-rolling-num__column--wrapper"
+                :style="{
+                    transform: item.transformValue,
+                    transition: `transform ${duration}s cubic-bezier(0.25, 1, 0.5, 1)`,
+                    transitionDelay: item.delay,
+                    height: '1200%' /* 12个数字，总高度1200% */
+                }"
+            >
+                <text
+                    v-for="(num, idx) in item.strip"
+                    :key="idx"
+                    class="hy-rolling-num__column--wrapper__digit"
+                    :style="textStyle"
+                >
+                    {{ num }}
+                </text>
+            </view>
+
+            <view
+                v-else
+                class="hy-rolling-num__column--symbol"
+                :style="{ height: addUnit(height), ...textStyleObject }"
+            >
+                {{ item.val }}
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-rolling-num',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch, type CSSProperties } from 'vue'
+import { addUnit } from '../../libs'
+import rollingNumProps from './props'
+
+/**
+ * 滚动数字组件，用于实现数字从初始值（全0）平滑滚动到目标值的动画效果。
+ * @displayName hy-rolling-num
+ */
+defineOptions({})
+
+const props = defineProps(rollingNumProps)
+
+// --- 核心逻辑：计算每列的配置 ---
+
+// **【修改点 1】** 定义包含冗余数字的数字条
+// 现在数字条有 12 个元素，每个元素占据 1/12 ≈ 8.33% 的高度
+const BASE_STRIP = [9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
+const ITEM_HEIGHT_PERCENT = 100 / BASE_STRIP.length // 8.333%
+
+// 添加内部状态管理，用于控制初始值和目标值的切换
+const displayValue = ref('')
+
+// 监听value变化，实现从初始值到目标值的滚动
+watch(
+    () => props.value,
+    (newValue) => {
+        const newValueStr = String(newValue)
+        const newValueLen = newValueStr.length
+
+        // 创建对应长度的全0初始值
+        const initialValue = '0'.repeat(newValueLen)
+
+        // 先显示初始值
+        displayValue.value = initialValue
+
+        // 延迟一段时间后再显示目标值，以触发滚动动画
+        // 100ms是一个比较合理的值，确保DOM有足够时间更新
+        setTimeout(() => {
+            displayValue.value = newValueStr
+        }, 100)
+    },
+    { immediate: true }
+)
+
+const renderList = computed(() => {
+    const str = displayValue.value
+    const len = str.length
+    const arr = []
+
+    // 正序 stripUp (用于 'up')：数字顺序为 9 0 1 ... 9 0
+    const stripUp = BASE_STRIP
+    // 倒序 stripDown (用于 'down' 或 'alternate')：数字顺序为 0 9 8 ... 1 0 9
+    const stripDown = [...BASE_STRIP].reverse()
+
+    for (let i = 0; i < len; i++) {
+        const char = str[i]
+        const isDigit = /^\d$/.test(char)
+        const digitVal = isDigit ? parseInt(char, 10) : 0
+
+        // 1. 确定当前列的滚动方向
+        let isReversed = props.scrollDirection === 'down'
+        if (props.scrollDirection === 'alternate') {
+            isReversed = i % 2 !== 0
+        }
+
+        // 2. 根据方向决定使用哪种数字条
+        const currentStrip = isReversed ? stripDown : stripUp
+
+        // 3. 计算 Transform 位移：找到目标数字在数字条中的索引位置
+        // **【修改点 2】**
+        // 目标数字总是存在两次 (0-9)
+        // - 向上滚动 ('up') 时，使用 **第二个** 匹配的索引，即 0~9 的正常排列部分。
+        // - 向下滚动 ('down') 时，使用 **第一个** 匹配的索引。
+        let targetIndex = -1
+
+        if (
+            props.scrollDirection === 'up' ||
+            (props.scrollDirection === 'alternate' && !isReversed)
+        ) {
+            // 向上滚：目标是中间的 0-9 部分 (索引 1 到 10)
+            // 查找 0 到 9 中间的那个索引
+            targetIndex = currentStrip.indexOf(digitVal, 1)
+        } else {
+            // 向下滚或交替的反向滚：目标是中间的 0-9 部分
+            // 查找 0 到 9 中间的那个索引
+            // 查找第一个数字，如果是 0，则目标是索引 10 (倒数第二个)
+            targetIndex = currentStrip.lastIndexOf(digitVal, currentStrip.length - 2)
+        }
+
+        // 确保找到了有效索引
+        if (targetIndex === -1) {
+            // 理论上不会发生，作为降级处理
+            targetIndex = currentStrip.indexOf(digitVal)
+        }
+
+        const transformValue = `translate3d(0, -${targetIndex * ITEM_HEIGHT_PERCENT}%, 0)`
+
+        // 4. 计算延迟 (Staggering)
+        let delaySec = 0
+        if (props.stopOrder === 'ltr') {
+            delaySec = i * props.delayStep
+        } else {
+            delaySec = (len - 1 - i) * props.delayStep
+        }
+
+        arr.push({
+            val: char,
+            isDigit,
+            strip: currentStrip,
+            transformValue,
+            delay: `${delaySec}s`
+        })
+    }
+    return arr
+})
+
+// --- 样式计算部分省略，但注意要用到 ITEM_HEIGHT_PERCENT ---
+
+const containerStyle = computed<CSSProperties>(() => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden'
+}))
+
+const textStyleObject = computed<CSSProperties>(() => ({
+    fontSize: addUnit(props.size),
+    color: props.color,
+    fontWeight: props.fontWeight,
+    lineHeight: addUnit(props.height),
+    ...props.customStyle
+}))
+
+const textStyle = computed(() => {
+    let s = ''
+    const obj = textStyleObject.value
+    for (const key in obj) {
+        // @ts-ignore
+        s += `${key}:${obj[key]};`
+    }
+    return s
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-rolling-num/index.scss

@@ -0,0 +1,34 @@
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(rolling-num) {
+  white-space: nowrap;
+
+  @include e(column) {
+    position: relative;
+    overflow: hidden;
+    display: inline-block;
+
+
+    @include m(wrapper) {
+      display: flex;
+      flex-direction: column;
+      will-change: transform;
+
+      @include e(digit) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        /* 100% / 12 个数字 = 8.3333% */
+        height: 8.3333%;
+        flex-shrink: 0;
+      }
+
+    }
+
+    @include m(symbol) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

package/components/hy-rolling-num/props.ts

@@ -0,0 +1,68 @@
+import type { CSSProperties, PropType } from 'vue'
+
+const rollingNumProps = {
+    /** 要显示的数字或字符串值 */
+    value: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 数字字体大小 */
+    size: {
+        type: [String, Number],
+        default: '32rpx'
+    },
+    /** 数字颜色 */
+    color: {
+        type: String,
+        default: '#333'
+    },
+    /** 字体粗细 */
+    fontWeight: {
+        type: [String, Number],
+        default: 'normal'
+    },
+    /** 单个数字的高度 */
+    height: {
+        type: [String, Number],
+        default: '40rpx'
+    },
+    /** 滚动动画持续时间（秒） */
+    duration: {
+        type: Number,
+        default: 1.5
+    },
+    /** 数字间距 */
+    letterSpacing: {
+        type: [String, Number],
+        default: 0
+    },
+    /**
+     * 滚动方向：向上、向下或交替
+     * @values up,down,alternate
+     * */
+    scrollDirection: {
+        type: String,
+        default: 'up'
+    },
+    /**
+     * 滚动停止顺序：从左到右或从右到左
+     * @values ltr,rtl
+     * */
+    stopOrder: {
+        type: String,
+        default: 'ltr'
+    },
+    /** 每个数字滚动的延迟时间间隔（秒） */
+    delayStep: {
+        type: Number,
+        default: 0.1
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default rollingNumProps

package/components/hy-sticky/hy-sticky.vue

@@ -20,7 +20,7 @@
 import { ref, computed, onMounted, onUnmounted, nextTick, getCurrentInstance, watch } from 'vue'
 import type { CSSProperties } from 'vue'
 import { onPageScroll } from '@dcloudio/uni-app'
-import { addUnit, getRect } from '../../libs'
+import { addUnit, getRect, guid } from '../../libs'
 import type { IStickyEmits } from './typing'
 import stickyProps from './props'
 
@@ -28,7 +28,7 @@ const props = defineProps(stickyProps)
 const emit = defineEmits<IStickyEmits>()
 
 const instance = getCurrentInstance()
-const sentinelId = `hy-sticky-sentinel-${Math.random().toString(36).slice(2, 9)}`
+const sentinelId = guid()
 const stickyRef = ref<HTMLElement | null>(null)
 const isFixed = ref(false)
 const placeholderHeight = ref(0)
@@ -81,9 +81,9 @@ const querySentinel = (): Promise<{
                     .exec((r2: any[]) => {
                         const stickyRect = (r2 && r2[0]) || {}
                         resolve({
-                            sentinelTop: sentinelRect.top ?? 0,
-                            sentinelBottom: sentinelRect.bottom ?? 0,
-                            stickyHeight: stickyRect.height ?? 0
+                            sentinelTop: sentinelRect.top || 0,
+                            sentinelBottom: sentinelRect.bottom || 0,
+                            stickyHeight: stickyRect.height || 0
                         })
                     })
             })

package/components/hy-tabbar/hy-tabbar.vue

@@ -95,7 +95,6 @@ watch(
 onMounted(() => {
     nextTick(() => {
         getRect('.list', true, instance).then((res) => {
-            console.log(res, current.value)
             rectList.value = res
         })
     })

package/components/hy-tabs/hy-tabs.vue

@@ -27,14 +27,12 @@
                             ]"
                         >
                             <slot v-if="$slots.icon" name="icon" :record="item" :index="index" />
-                            <template v-else>
-                                <view
-                                    class="hy-tabs__wrapper--nav__item--prefix-icon"
-                                    v-if="item.icon"
-                                >
-                                    <HyIcon :name="item.icon" :customStyle="iconStyle"></HyIcon>
-                                </view>
-                            </template>
+                            <view
+                                class="hy-tabs__wrapper--nav__item--prefix-icon"
+                                v-else-if="item.icon"
+                            >
+                                <hy-icon :name="item.icon" :customStyle="iconStyle"></hy-icon>
+                            </view>
                             <slot
                                 v-if="$slots.content"
                                 name="content"
@@ -107,17 +105,17 @@
         </view>
 
         <!-- 内容轮播图	-->
-        <slot name="main">
-            <swiper
-                :current="innerCurrent"
-                @animationfinish="animationFinish"
-                :style="{ height: swiperHeight }"
-            >
-                <swiper-item class="swiper-item" v-for="(item, i) in list" :key="i">
-                    <slot :record="item.content" />
-                </swiper-item>
-            </swiper>
-        </slot>
+        <slot v-if="$slots.main" name="main"></slot>
+        <swiper
+            v-else-if="list.length"
+            :current="innerCurrent"
+            @animationfinish="animationFinish"
+            :style="{ height: swiperHeight }"
+        >
+            <swiper-item class="swiper-item" v-for="(item, i) in list" :key="i">
+                <slot :record="item.content" />
+            </swiper-item>
+        </swiper>
     </view>
 </template>
 
@@ -197,7 +195,7 @@ onMounted(() => {
 })
 
 /**
- * @description 设置线左边距离
+ * 设置线左边距离
  */
 const setLineLeft = () => {
     const tabItem = props.list[innerCurrent.value]
@@ -263,7 +261,7 @@ const setScrollLeft = () => {
     scrollLeft.value = Math.max(0, scrollLeft_1)
 }
 /**
- * @description 获取所有标签的尺寸
+ * 获取所有标签的尺寸
  * */
 const resize = () => {
     // 如果不存在list，则不处理
@@ -300,7 +298,7 @@ const resize = () => {
     )
 }
 /**
- * @description 获取导航菜单的尺寸
+ * 获取导航菜单的尺寸
  * */
 const getTabsRect = () => {
     return new Promise((resolve) => {
@@ -308,7 +306,7 @@ const getTabsRect = () => {
     })
 }
 /**
- * @description 获取所有标签的尺寸
+ * 获取所有标签的尺寸
  * */
 const getAllItemRect = () => {
     return new Promise((resolve) => {

package/global.d.ts

@@ -58,6 +58,7 @@ declare module 'vue' {
         HyRadio: (typeof import('./components/hy-radio/hy-radio.vue'))['default']
         HyRate: (typeof import('./components/hy-rate/hy-rate.vue'))['default']
         HyReadMore: (typeof import('./components/hy-read-more/hy-read-more.vue'))['default']
+        HyRollingNum: (typeof import('./components/hy-rolling-num/hy-rolling-num.vue'))['default']
         HyScrollList: (typeof import('./components/hy-scroll-list/hy-scroll-list.vue'))['default']
         HySearch: (typeof import('./components/hy-search/hy-search.vue'))['default']
         HySignature: (typeof import('./components/hy-signature/hy-signature.vue'))['default']

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.5.7",
-  "description": "feat: 新增sticky组件",
+  "version": "0.5.8",
+  "description": "feat: 新增rollingNum组件",
   "main": "./index.ts",
   "private": false,
   "scripts": {},