oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-tree/oxy-tree.vue

@@ -17,13 +17,16 @@
 
     <view v-if="data.length" class="oxy-tree__virtual-scroll" :style="{ height: height }">
       <scroll-view class="oxy-tree__view" scroll-y :scroll-x="true" :scroll-top="scrollTop" @scroll="handleScroll">
-        <view class="oxy-tree__container" :style="{ height: totalHeight + 'px' }">
-          <view class="oxy-tree__items" :style="{ transform: `translateY(${virtualOffsetY}px)` }">
+        <view class="oxy-tree__container" :style="{ height: unitConvert(totalHeight, 0, { output: 'px' }) }">
+          <view class="oxy-tree__items" :style="{ transform: `translateY(${unitConvert(virtualOffsetY, 0, { output: 'px' })})` }">
             <view v-for="(item, index) in virtualData" :key="index">
               <view class="oxy-tree-node-content" :style="getNodeStyle(item)" :class="getNodeClass(item)" @click="handleNodeClick(item)">
                 <!-- 兼容支付宝、微信小程序 -->
-                <view @tap.stop="handleClickExpand(item)">
-                  <oxy-icon name="fill-arrow-down" custom-class="oxy-tree-node-icon" size="22px"></oxy-icon>
+                <view class="oxy-tree-node-toggle" @tap.stop="handleClickExpand(item)">
+                  <oxy-icon
+                    :name="expandedKeySet.has(item.key) ? 'chevron-down-circle' : 'chevron-right-circle'"
+                    custom-class="oxy-tree-node-icon"
+                  ></oxy-icon>
                 </view>
                 <oxy-checkbox
                   v-if="showCheckbox"
@@ -49,7 +52,7 @@
 
     <!-- 回到顶部按钮 -->
     <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
-      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+      <oxy-icon name="backtop" color="#fff" size="40rpx"></oxy-icon>
     </view>
   </view>
 </template>
@@ -71,6 +74,7 @@ import type { RawTreeNode, Tree, TreeInstance, TreeNode } from './types'
 import { treeProps, type TreeExpose } from './types'
 import { isSetsEqual, useTreeMethods } from './utils'
 import { useVirtualScroll } from '../composables/useVirtualScroll'
+import { withDefaultUnit, unitConvert, unitConvertWithDefault } from '../common/util'
 
 // 获取组件的 props 和 emit 函数
 const props = defineProps(treeProps)
@@ -334,8 +338,8 @@ const updateValue = () => {
 }
 const getNodeStyle = (item: TreeNode) => {
   return {
-    height: itemHeight.value,
-    paddingLeft: `${(item.level - 1) * (props.indent || 16)}px`
+    height: withDefaultUnit(itemHeight.value, 'rpx'),
+    paddingLeft: withDefaultUnit((item.level - 1) * (props.indent || 16))
   }
 }
 const getNodeClass = (item: TreeNode) => {
@@ -384,8 +388,8 @@ const scrollToTop = () => {
 }
 const scrollToBottom = () => {
   const visibleCount = flattenTree.value.length
-  const containerHeight = parseFloat(height.value || '0')
-  const targetScrollTop = Math.max(visibleCount * parseFloat(itemHeight.value) - containerHeight, 0)
+  const containerHeight = unitConvert(height.value)
+  const targetScrollTop = Math.max(visibleCount * unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' }) - containerHeight, 0)
   virtualScrollToPosition(targetScrollTop)
 }
 const scrollToPosition = (position: number | string) => {

package/components/oxy-tree/types.ts

@@ -48,7 +48,7 @@ export const treeProps = {
     default: ''
   },
   emptyText: makeStringProp('暂无数据'),
-  height: makeStringProp('300px'),
+  height: makeStringProp('600rpx'),
   /**
    * 是否显示回到顶部按钮
    * 类型：boolean
@@ -57,17 +57,20 @@ export const treeProps = {
   showBackToTop: makeBooleanProp(false),
   /**
    * 滚动多远显示backToTop
-   * 类型：number
-   * 默认值：'300px'
+   * 类型：string（支持 `px/rpx`，纯数字字符串按 rpx 处理）
+   * 默认值：'600rpx'
    */
-  backToTopThreshold: makeStringProp('300px'),
+  backToTopThreshold: makeStringProp('600rpx'),
   /**
-   * 单个项目高度
-   * 类型：number
-   * 默认值：'44px'
+   * 列表项的预估高度，需带单位
+   * @description 虚拟列表会根据此值计算占位高度，越准确滚动越平滑。支持如 '44px' 或 '88rpx'，纯数字字符串按 rpx 处理。
+   * 默认值：'88rpx'
    */
-  itemHeight: makeStringProp('44px'),
-  indent: makeNumberProp(16),
+  itemHeight: makeStringProp('88rpx'),
+  /**
+   * 相邻级节点间的水平缩进，number 类型按 `rpx` 语义处理
+   */
+  indent: makeNumberProp(32),
   selectionLeafOnly: makeBooleanProp(false),
   filterMethod: {
     type: Function as PropType<(keyword: string, node: RawTreeNode) => boolean>,

package/components/oxy-upload/index.scss

@@ -39,7 +39,7 @@
     font-size: $-upload-evoke-icon-size;
     background-color: $-upload-evoke-bg;
     color: $-upload-evoke-color;
-    margin-bottom: 12px;
+    margin-bottom: 28rpx;
 
     @include when(disabled) {
       color: $-upload-evoke-disabled-color;
@@ -47,18 +47,18 @@
   }
 
   @include e(evoke-file) {
-    border-radius: 8px;
+    border-radius: $-upload-file-radius;
   }
 
   @include e(evoke-num) {
-    font-size: 14px;
-    line-height: 14px;
-    margin-top: 8px;
+    font-size: $-fs-content;
+    line-height: $-fs-content;
+    margin-top: 20rpx;
   }
 
   @include edeep(evoke-icon) {
-    width: 32px;
-    height: 32px;
+    width: 64rpx;
+    height: 64rpx;
   }
 
   @include e(input) {
@@ -75,7 +75,7 @@
     position: relative;
     width: $-upload-size;
     height: $-upload-size;
-    margin: 0 12px 12px 0;
+    margin: 0 24rpx 28rpx 0;
   }
 
   @include e(preview-list) {
@@ -106,9 +106,9 @@
     font-size: $-upload-file-fs;
     color: $-upload-file-color;
     box-sizing: border-box;
-    padding: 0 4px;
+    padding: 0 12rpx;
     text-align: center;
-    margin-top: 8px;
+    margin-top: 20rpx;
     @include lineEllipsis()
   }
 
@@ -117,11 +117,11 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 24px;
+    font-size: $-upload-preview-icon-size;
     color: $-color-white;
 
     &::before {
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: $-upload-video-play-bg;
       border-radius: 50%;
     }
   }
@@ -159,7 +159,7 @@
   @include e(progress-txt) {
     font-size: $-upload-progress-fs;
     line-height: $-upload-progress-fs;
-    margin-top: 9px;
+    margin-top: 20rpx;
     color: $-color-white;
   }
 
@@ -178,21 +178,21 @@
   }
 
   @include e(preview-file) {
-    margin-bottom: 32px;
+    margin-bottom: 64rpx;
     .oxy-upload__status-content:not(.oxy-upload__mask) {
       border: 1px solid $-color-border;
       box-sizing: border-box;
-      border-radius: 8px;
+      border-radius: $-upload-file-radius;
       .oxy-upload__picture {
-        border-radius: 8px;
+        border-radius: $-upload-file-radius;
       }
       .oxy-upload__picture-icon {
-        width: 32px;
-        height: 32px;
+        width: 64rpx;
+        height: 64rpx;
       }
     }
     .oxy-upload__mask {
-      border-radius: 8px;
+      border-radius: $-upload-file-radius;
     }
     :deep(.oxy-tooltip) {
       width: 100%;
@@ -205,12 +205,12 @@
     .oxy-upload____status-content-name {
       display: block;
       width: 100%;
-      font-size: $-upload-file-fs;
+      font-size: $-upload-preview-name-fs;
       color: $-upload-file-color;
       box-sizing: border-box;
-      padding: 0 4px;
+      padding: 0 12rpx;
       text-align: center;
-      margin-top: 8px;
+      margin-top: 20rpx;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -219,7 +219,7 @@
 
   &.oxy-upload__position-right {
     .oxy-upload__evoke {
-      margin-right: 12px;
+      margin-right: 24rpx;
     }
   }
 }

package/components/oxy-upload/types.ts

@@ -283,9 +283,9 @@ export const uploadProps = {
   /**
    * 加载中图标尺寸
    * 类型：string
-   * 默认值：'24px'
+   * 默认值：'48rpx'
    */
-  loadingSize: makeStringProp('24px'),
+  loadingSize: makeStringProp('48rpx'),
   /**
    * 是否压缩视频，当 accept 为 video 时生效。
    * 类型：boolean

package/components/oxy-verification-code/index.scss

@@ -0,0 +1,6 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+@include b(verification-code) {
+  display: inline-block;
+}

package/components/oxy-verification-code/oxy-verification-code.vue

@@ -0,0 +1,187 @@
+<template>
+  <view :class="`oxy-verification-code ${customClass}`" :style="customStyle">
+    <!-- #ifdef MP-WEIXIN -->
+    <canvas :style="canvasStyle" :id="canvasId" :canvas-id="canvasId" type="2d" @tap="drawTap"></canvas>
+    <!-- #endif -->
+    <!-- #ifndef MP-WEIXIN -->
+    <canvas :width="canvasWidth" :height="canvasHeight" :style="canvasStyle" :id="canvasId" :canvas-id="canvasId" @tap="drawTap"></canvas>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-verification-code',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, getCurrentInstance, ref, watch, onMounted } from 'vue'
+import { objToStyle, unitConvert, unitConvertWithDefault, uuid } from '../common/util'
+import { verificationCodeProps } from './types'
+// #ifdef MP-WEIXIN
+import { canvas2dAdapter } from '../common/canvasHelper'
+// #endif
+
+const props = defineProps(verificationCodeProps)
+const { proxy } = getCurrentInstance() as any
+
+const emit = defineEmits(['refresh'])
+
+const pixelRatio = ref<number>(1) // 像素比
+const canvasId = ref<string>(`oxy-verification-code${uuid()}`)
+let ctx: UniApp.CanvasContext | null = null
+const identifyCode = ref('')
+const numberList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
+const letterList = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])
+const canvasWidth = computed(() => unitConvertWithDefault(props.width, { defaultUnit: 'rpx' }))
+const canvasHeight = computed(() => unitConvertWithDefault(props.height, { defaultUnit: 'rpx' }))
+
+const canvasStyle = computed(() => {
+  const style = {
+    width: unitConvert(canvasWidth.value, 0, { output: 'px' }),
+    height: unitConvert(canvasHeight.value, 0, { output: 'px' })
+  }
+  return `${objToStyle(style)}`
+})
+
+watch(
+  () => props.securityCode,
+  (val) => {
+    if (val) drawPic()
+  },
+  { immediate: true }
+)
+
+function verification(code: string) {
+  if (props.isCaseCheck) {
+    return identifyCode.value == code
+  } else {
+    return identifyCode.value.toLowerCase() == code.toLowerCase()
+  }
+}
+
+function getCode() {
+  return identifyCode.value
+}
+
+function randomNum(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min) + min)
+}
+
+function getcheckCode() {
+  let code = ''
+  const codeLength = props.codeLength
+  const random =
+    props.codeType === 'number' ? numberList.value : props.codeType === 'letter' ? letterList.value : [...numberList.value, ...letterList.value]
+  for (let i = 0; i < codeLength; i++) {
+    let index = Math.floor(Math.random() * random.length)
+    code += random[index]
+  }
+  identifyCode.value = code
+}
+
+function drawTap() {
+  if (props.securityCode) {
+    emit('refresh')
+  } else {
+    drawPic()
+  }
+}
+
+function getContext() {
+  return new Promise<UniApp.CanvasContext>((resolve) => {
+    if (ctx) {
+      return resolve(ctx)
+    }
+    // #ifndef MP-WEIXIN
+    ctx = uni.createCanvasContext(canvasId.value, proxy)
+    resolve(ctx)
+    // #endif
+    // #ifdef MP-WEIXIN
+    uni
+      .createSelectorQuery()
+      .in(proxy)
+      .select(`#${canvasId.value}`)
+      .node((res) => {
+        if (res && res.node) {
+          const canvas = res.node
+          ctx = canvas2dAdapter(canvas.getContext('2d') as CanvasRenderingContext2D)
+          canvas.width = canvasWidth.value * pixelRatio.value
+          canvas.height = canvasHeight.value * pixelRatio.value
+          ctx.scale(pixelRatio.value, pixelRatio.value)
+          resolve(ctx)
+        }
+      })
+      .exec()
+    // #endif
+  })
+}
+
+function drawPic() {
+  if (props.securityCode) {
+    identifyCode.value = props.securityCode
+  } else {
+    getcheckCode()
+  }
+  getContext().then((context) => {
+    context.setTextBaseline('bottom')
+    context.setFillStyle(props.backgroundColor)
+    context.fillRect(0, 0, canvasWidth.value, canvasHeight.value)
+    for (let i = 0; i < identifyCode.value.length; i++) {
+      drawText(context, identifyCode.value[i], i)
+    }
+    drawLine(context)
+    context.draw()
+  })
+}
+
+function drawText(context: any, txt: string, i: number) {
+  let a = Math.floor(Math.random() * props.colors.length)
+  context.setFillStyle(props.colors[a])
+
+  let fontSize = Math.trunc(canvasWidth.value / identifyCode.value.length)
+  context.setFontSize(randomNum(fontSize, fontSize))
+  let x = i * (canvasWidth.value / (identifyCode.value.length + 1)) + Math.trunc(fontSize / 2)
+  let y = randomNum(fontSize, canvasHeight.value - 5)
+  var deg = randomNum(-10, 10)
+
+  context.translate(x, y)
+  context.rotate((deg * Math.PI) / 180)
+  context.fillText(txt, 0, 0)
+
+  context.rotate((-deg * Math.PI) / 180)
+  context.translate(-x, -y)
+}
+
+function drawLine(context: any) {
+  for (let i = 0; i < props.lineLength; i++) {
+    let a = Math.floor(Math.random() * props.lineColors.length)
+    context.setStrokeStyle(props.lineColors[a])
+    context.beginPath()
+    let startX = randomNum(0, canvasWidth.value)
+    let startY = randomNum(0, canvasHeight.value)
+    let endX = randomNum(0, canvasWidth.value)
+    let endY = randomNum(0, canvasHeight.value)
+    context.moveTo(startX, startY)
+    context.lineTo(endX, endY)
+    context.stroke()
+  }
+}
+
+onMounted(() => {
+  drawPic()
+})
+
+defineExpose({
+  getCode,
+  verification
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-verification-code/types.ts

@@ -0,0 +1,82 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export type VerificationCodeType = '' | 'number' | 'letter'
+
+export const verificationCodeProps = {
+  ...baseProps,
+
+  /**
+   * 验证码值，如果是通过接口调用的验证码需要在这里传入，不传入则自动生成验证
+   * 类型: string
+   * 默认值: ''
+   */
+  securityCode: makeStringProp(''),
+
+  /**
+   * 是否校验字母大小写
+   * 类型: boolean
+   * 默认值: true
+   */
+  isCaseCheck: makeBooleanProp(true),
+
+  /**
+   * 验证码类型
+   * 类型: string
+   * 默认值: ''
+   */
+  codeType: makeStringProp<VerificationCodeType>(''),
+
+  /**
+   * 自动生成验证码数量
+   * 类型: number
+   * 默认值: 4
+   */
+  codeLength: makeNumberProp(4),
+
+  /**
+   * 画板宽度，支持 number / string（如 `240rpx`、`120px`），number 与纯数字字符串按 rpx 处理
+   * 类型: number | string
+   * 默认值: 240
+   */
+  width: makeNumericProp(240),
+
+  /**
+   * 画板高度，支持 number / string（如 `120rpx`、`60px`），number 与纯数字字符串按 rpx 处理
+   * 类型: number | string
+   * 默认值: 120
+   */
+  height: makeNumericProp(120),
+
+  /**
+   * 干扰线数量
+   * 类型: number
+   * 默认值: 8
+   */
+  lineLength: makeNumberProp(8),
+
+  /**
+   * 画板背景色
+   * 类型: string
+   * 默认值: 'rgba(238, 226, 224, 1)'
+   */
+  backgroundColor: makeStringProp('rgba(238, 226, 224, 1)'),
+
+  /**
+   * 干扰线可选颜色组（颜色会随机选择这些颜色，需要固定颜色传一种颜色即可）
+   * 类型: array
+   */
+  lineColors: {
+    type: Array as PropType<string[]>,
+    default: () => ['rgba(238, 0, 0, 0.5)', 'rgba(0, 170, 255, 0.5)', 'rgba(0, 170, 0, 0.5)', 'rgba(0, 0, 0, 0.5)', 'rgba(153, 146, 255, 0.5)']
+  },
+
+  /**
+   * 文字可选颜色组（颜色会随机选择这些颜色，需要固定颜色传一种颜色即可）
+   * 类型: array
+   */
+  colors: {
+    type: Array as PropType<string[]>,
+    default: () => ['rgba(238, 0, 0, 1)', 'rgba(0, 170, 255, 1)', 'rgba(0, 170, 0, 1)', 'rgba(0, 0, 0, 1)', 'rgba(153, 146, 255, 1)']
+  }
+}

package/components/oxy-video-preview/index.scss

@@ -16,16 +16,16 @@
 
   @include e(video) {
     width: 100%;
-    height: 242px;
+    height: 484rpx;
     transition: all 0.3s ease;
   }
 
   @include edeep(close) {
     position: absolute;
     box-sizing: border-box;
-    top: 0px;
-    right: 0px;
-    padding: 12px;
+    top: 0;
+    right: 0;
+    padding: 24rpx;
     text-align: center;
     cursor: pointer;
     font-size: $-video-preview-close-font-size;

package/components/oxy-virtual-scroll/index.scss

@@ -20,11 +20,11 @@
 
   @include e(back-top) {
     position: absolute;
-    right: 20px;
-    bottom: 20px;
-    width: 40px;
-    height: 40px;
-    background: rgba(0, 0, 0, 0.6);
+    right: 40rpx;
+    bottom: 40rpx;
+    width: 80rpx;
+    height: 80rpx;
+    background: $-virtual-scroll-back-top-bg;
     border-radius: 50%;
     display: flex;
     align-items: center;

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

@@ -7,10 +7,10 @@
       class="oxy-virtual-scroll__view"
       :scroll-y="scrollY"
       :scroll-x="scrollX"
-      :upper-threshold="upperThreshold"
-      :lower-threshold="lowerThreshold"
+      :upper-threshold="upperThresholdInPx"
+      :lower-threshold="lowerThresholdInPx"
       :scroll-top="scrollTop"
-      :scroll-left="scrollLeft"
+      :scroll-left="scrollLeftInPx"
       :scroll-with-animation="scrollWithAnimation"
       :enable-back-to-top="enableBackToTop"
       :show-scrollbar="showScrollbar"
@@ -25,8 +25,8 @@
       @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)` }">
+      <view class="oxy-virtual-scroll__container" :style="{ height: unitConvert(totalHeight, 0, { output: 'px' }) }">
+        <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${unitConvert(virtualOffsetY, 0, { output: 'px' })})` }">
           <view v-for="(item, index) in virtualData" :key="index">
             <slot name="item" :item="item" :index="startIndex + index"></slot>
           </view>
@@ -41,7 +41,7 @@
 
     <!-- 回到顶部按钮 -->
     <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
-      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+      <oxy-icon name="backtop" color="#fff" size="40rpx"></oxy-icon>
     </view>
   </view>
 </template>
@@ -58,13 +58,17 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import type { ScrollViewOnScrollEvent, ScrollViewOnScrolltolowerEvent, ScrollViewOnScrolltoupperEvent } from '@uni-helper/uni-app-types'
 import { virtualScrollProps, type VirtualScrollExpose } from './types'
 import { useVirtualScroll } from '../composables/useVirtualScroll'
+import { unitConvert, unitConvertWithDefault } from '../common/util'
 
 const props = defineProps(virtualScrollProps)
 const emit = defineEmits(['scroll', 'scroll-to-upper', 'scroll-to-lower'])
+const upperThresholdInPx = computed(() => unitConvertWithDefault(props.upperThreshold, { defaultUnit: 'rpx' }))
+const lowerThresholdInPx = computed(() => unitConvertWithDefault(props.lowerThreshold, { defaultUnit: 'rpx' }))
+const scrollLeftInPx = computed(() => unitConvertWithDefault(props.scrollLeft, { defaultUnit: 'rpx' }))
 
 // 解构props用于组合式函数
 const { data, virtual, height, itemHeight, idKey, showBackToTop, backToTopThreshold } = toRefs(props)

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

@@ -30,16 +30,16 @@ export const virtualScrollProps = {
   showBackToTop: makeBooleanProp(false),
   /**
    * 滚动多远显示backToTop
-   * 类型：number
-   * 默认值：'300px'
+   * 类型：string（支持 `px/rpx`，纯数字字符串按 rpx 处理）
+   * 默认值：'600rpx'
    */
-  backToTopThreshold: makeStringProp('300px'),
+  backToTopThreshold: makeStringProp('600rpx'),
   /**
-   * 单个项目高度
-   * 类型：number
-   * 默认值：'44px'
+   * 列表项的预估高度，需带单位
+   * @description 虚拟列表会根据此值计算占位高度，越准确滚动越平滑。支持如 '44px' 或 '88rpx'，纯数字字符串按 rpx 处理。
+   * 默认值：'88rpx'
    */
-  itemHeight: makeStringProp('44px'),
+  itemHeight: makeStringProp('88rpx'),
   /**
    * 是否开启水平滚动
    * 类型：boolean
@@ -53,19 +53,19 @@ export const virtualScrollProps = {
    */
   scrollY: makeBooleanProp(true),
   /**
-   * 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
+   * 距顶部/左边多远时触发 scrolltoupper 事件，支持 `px/rpx`，number 与纯数字字符串按 rpx 处理
    * 类型：number | string
-   * 默认值：50
+   * 默认值：100
    */
-  upperThreshold: makeNumericProp(50),
+  upperThreshold: makeNumericProp(100),
   /**
-   * 距底部/右边多远时（单位px），触发 scrolltolower 事件
+   * 距底部/右边多远时触发 scrolltolower 事件，支持 `px/rpx`，number 与纯数字字符串按 rpx 处理
    * 类型：number | string
-   * 默认值：50
+   * 默认值：100
    */
-  lowerThreshold: makeNumericProp(50),
+  lowerThreshold: makeNumericProp(100),
   /**
-   * 设置横向滚动条位置
+   * 设置横向滚动条位置，支持 `px/rpx`，number 与纯数字字符串按 rpx 处理
    * 类型：number | string
    * 默认值：0
    */