hy-app 0.2.13 → 0.2.15

package/components/hy-list/hy-list.vue

@@ -9,10 +9,7 @@
     class="hy-virtual-container"
   >
     <view class="hy-virtual-container__list">
-      <slot
-        v-if="slotDefault"
-        :record="line === 1 ? virtualData : waterfall"
-      ></slot>
+      <slot v-if="slotDefault" :record="line === 1 ? virtualData : waterfall"></slot>
       <template v-else>
         <view
           v-if="line === 1"
@@ -39,7 +36,7 @@
           >
             <slot name="left" :record="item"></slot>
           </view>
-          <slot v-else name="left-list" :record="waterfall.left"> </slot>
+          <slot v-else name="left-list" :record="waterfall.left"></slot>
         </view>
         <view
           v-if="line === 2"
@@ -55,7 +52,7 @@
           >
             <slot name="right" :record="item"></slot>
           </view>
-          <slot v-else name="right-list" :record="waterfall.right"> </slot>
+          <slot v-else name="right-list" :record="waterfall.right"></slot>
         </view>
       </template>
       <!--加载更多样式-->
@@ -65,13 +62,18 @@
 </template>
 
 <script lang="ts">
+/**
+ * 实现只展示可视内容的dom，减少dom创建，优化滚动性能
+ * @displayName hy-list
+ */
+defineOptions({})
 export default {
   name: 'hy-list',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
@@ -87,12 +89,78 @@ import {
   toRefs,
   useSlots,
   watch,
-} from "vue";
-import { addUnit, getPx, getRect } from "../../utils";
-import type IProps from "./typing";
-import defaultProps from "./props";
+} from 'vue'
+import { addUnit, getPx, getRect } from '../../utils'
+import type { IListEmits } from './typing'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 数据列表 */
+  list: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  /** 容器高度，必须给个高度，否则加载全部数据 */
+  containerHeight: {
+    type: String,
+    default: '100%',
+  },
+  /** 子容器的高度，必须和内容一致，否则计算有问题 */
+  itemHeight: {
+    type: [String, Number],
+    default: '40px',
+  },
+  /** 子容器的底部，会计算到容器内 */
+  marginBottom: {
+    type: [String, Number],
+    default: 10,
+  },
+  /** 子容器的内边距 */
+  padding: {
+    type: [String, Number],
+    default: 10,
+  },
+  /** 子容器的圆角，单位px */
+  borderRadius: {
+    type: [String, Number],
+    default: '3px',
+  },
+  /** 容器背景色 */
+  background: {
+    type: String,
+    default: 'transparent',
+  },
+  /** 是否显示边框 */
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  /** 展示几列 */
+  line: {
+    type: Number,
+    default: 1,
+  },
+  /** 每一项的唯一标识key */
+  keyField: {
+    type: String,
+    default: 'id',
+  },
+  /**
+   * 加载状态
+   * @values loadMore,loading,noMore
+   * */
+  load: {
+    type: String,
+    default: 'loadMore',
+  },
+  /** 显示底部加载状态 */
+  showDivider: {
+    type: Boolean,
+    default: true,
+  },
+})
 const {
   list,
   line,
@@ -104,33 +172,33 @@ const {
   borderRadius,
   background,
   border,
-} = toRefs(props);
-const emit = defineEmits(["scrollButton", "click"]);
+} = toRefs(props)
+const emit = defineEmits<IListEmits>()
 
-const slots = useSlots();
+const slots = useSlots()
 // 滚动条距离顶部距离
-const scrollTop = ref(0);
+const scrollTop = ref(0)
 // 可视区域的高度
-const viewHeight = ref(0);
+const viewHeight = ref(0)
 const waterfall: {
-  left: AnyObject[];
-  right: AnyObject[];
+  left: AnyObject[]
+  right: AnyObject[]
 } = reactive({
   left: [],
   right: [],
-});
+})
 // 排列方式
-const arrange = computed(() => (line.value === 1 ? "column" : "row"));
-const boxHeight = getPx(itemHeight.value) + getPx(marginBottom.value);
-const listHeight = addUnit(containerHeight.value);
-const instance = getCurrentInstance();
+const arrange = computed(() => (line.value === 1 ? 'column' : 'row'))
+const boxHeight = getPx(itemHeight.value) + getPx(marginBottom.value)
+const listHeight = addUnit(containerHeight.value)
+const instance = getCurrentInstance()
 
 onMounted(() => {
   nextTick(async () => {
-    const res = await getRect(".hy-virtual-container", false, instance);
-    viewHeight.value = (res as UniApp.NodeInfo).height ?? 0;
-  });
-});
+    const res = await getRect('.hy-virtual-container', false, instance)
+    viewHeight.value = (res as UniApp.NodeInfo).height ?? 0
+  })
+})
 
 const itemStyle = computed((): CSSProperties => {
   return {
@@ -139,91 +207,89 @@ const itemStyle = computed((): CSSProperties => {
     marginBottom: addUnit(marginBottom.value),
     borderRadius: addUnit(borderRadius.value),
     background: background.value,
-    border: border.value ? "1px solid #dadbde" : "",
-  };
-});
+    border: border.value ? '1px solid #dadbde' : '',
+  }
+})
 
 /**
  * @description 虚拟列表真实展示数据：起始下标
  */
 const start = computed(() => {
-  const s = Math.floor(scrollTop.value / boxHeight);
-  return Math.max(0, s * line.value);
-});
+  const s = Math.floor(scrollTop.value / boxHeight)
+  return Math.max(0, s * line.value)
+})
 
 /**
  * @description 虚拟列表真实展示数据：结束下标
  */
 const over = computed(() => {
-  const o = Math.floor(
-    (scrollTop.value + viewHeight.value + 1) / boxHeight + 5,
-  );
-  return Math.min(list.value.length, o * line.value);
-});
+  const o = Math.floor((scrollTop.value + viewHeight.value + 1) / boxHeight + 5)
+  return Math.min(list.value.length, o * line.value)
+})
 
 /**
  * @description 计算虚拟列表的padding(保持列表高度完整且滚动条能正常滚动)
  */
 const paddingAttr = computed(() => {
-  const paddingTop = start.value * boxHeight;
-  const paddingBottom = (list.value.length - over.value) * boxHeight;
-  return `${paddingTop / line.value}px 0 ${paddingBottom / line.value}px`;
-});
+  const paddingTop = start.value * boxHeight
+  const paddingBottom = (list.value.length - over.value) * boxHeight
+  return `${paddingTop / line.value}px 0 ${paddingBottom / line.value}px`
+})
 
 /**
  * @description 虚拟列表真实展示数据
  */
 const virtualData = computed(() => {
-  return list.value.slice(start.value, over.value);
-});
+  return list.value.slice(start.value, over.value)
+})
 
 watch(
   () => virtualData.value,
   (newVal, oldValue) => {
-    waterfall.left.length = 0;
-    waterfall.right.length = 0;
-    if (line.value === 2 && newVal.every((item) => typeof item !== "string")) {
+    waterfall.left.length = 0
+    waterfall.right.length = 0
+    if (line.value === 2 && newVal.every((item) => typeof item !== 'string')) {
       newVal.forEach((item, i) => {
         if (i % 2 === 0) {
-          waterfall.left.push(item as AnyObject);
+          waterfall.left.push(item as AnyObject)
         } else {
-          waterfall.right.push(item as AnyObject);
+          waterfall.right.push(item as AnyObject)
         }
-      });
+      })
     }
   },
   { immediate: true, deep: true },
-);
+)
 
 /**
  * @description 监听滚动条距离顶部距离，实时更新
  */
 const onScroll = async (e: any) => {
-  scrollTop.value = e.detail.scrollTop ?? 0;
-};
+  scrollTop.value = e.detail.scrollTop ?? 0
+}
 
 /**
  * @description 滚动底部函数
  * */
 const scrollToLower = () => {
-  emit("scrollButton");
-};
+  emit('scrollToLower')
+}
 
 /**
  * @description 点击行触发函数
  * */
 const handleClick = (temp: string | AnyObject) => {
-  emit("click", temp);
-};
+  emit('click', temp)
+}
 
 /**
  * @description 获取默认插槽
  */
-const slotDefault = useSlots().default;
+const slotDefault = useSlots().default
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 .hy-virtual-container {
   height: v-bind(listHeight);
   &__list {

package/components/hy-list/typing.d.ts

@@ -2,49 +2,56 @@ export default interface HyListProps {
   /**
    * @description 数据列表
    * */
-  list: (AnyObject | string)[];
+  list: (AnyObject | string)[]
   /**
    * @description 容器高度，必须给个高度，否则加载全部数据
    * */
-  containerHeight: string;
+  containerHeight: string
   /**
    * @description 子容器的高度，必须和内容一致，否则计算有问题
    * */
-  itemHeight?: number | string;
+  itemHeight?: number | string
   /**
    * @description 子容器的内边距
    * */
-  padding?: number | string;
+  padding?: number | string
   /**
    * @description 子容器的底部，会计算到容器内
    * */
-  marginBottom?: number | string;
+  marginBottom?: number | string
   /**
    * @description 子容器的圆角，单位px
    * */
-  borderRadius?: number | string;
+  borderRadius?: number | string
   /**
    * @description 容器背景色
    * */
-  background?: string;
+  background?: string
   /**
    * @description 是否显示边框（默认false）
    * */
-  border?: boolean;
+  border?: boolean
   /**
    * @description 展示几列
    * */
-  line?: number;
+  line?: number
   /**
    * @description 加载状态
    * */
-  load?: "loadMore" | "loading" | "noMore";
+  load?: 'loadMore' | 'loading' | 'noMore'
   /**
    * @description 每一项的唯一标识key
    * */
-  keyField?: string;
+  keyField?: string
   /**
    * @description 显示底部加载状态
    * */
-  showDivider?: boolean;
+  showDivider?: boolean
+}
+
+export interface IListEmits {
+  /** 点击行触发 */
+  (e: 'click', temp: string | AnyObject): void
+  /** 滚动底部触发 */
+  (e: 'scrollToLower'): void
 }

package/components/hy-loading/hy-loading.vue

@@ -25,12 +25,7 @@
     >
       <block v-if="mode === 'spinner'">
         <!-- #ifndef APP-NVUE -->
-        <view
-          v-for="(item, index) in array12"
-          :key="index"
-          class="hy-loading-icon__dot"
-        >
-        </view>
+        <view v-for="(item, index) in array12" :key="index" class="hy-loading-icon__dot"></view>
         <!-- #endif -->
       </block>
     </view>
@@ -41,47 +36,106 @@
         fontSize: addUnit(textSize),
         color: textColor,
       }"
-      >{{ text }}</text
     >
+      {{ text }}
+    </text>
   </view>
 </template>
 
 <script lang="ts">
+/**
+ * 目前用在华玥的loadMore加载更多等组件的正在加载状态场景。
+ * @displayName hy-loading
+ */
+defineOptions({})
 export default {
   name: 'hy-loading',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { toRefs, ref, computed } from "vue";
-import { addUnit, colorGradient } from "../../utils";
+import { toRefs, ref, computed } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import { addUnit, colorGradient } from '../../utils'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { show, size, color, mode, inactiveColor } = toRefs(props);
-const emit = defineEmits(["update:modelValue", "change"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 是否显示组件 */
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  /** 动画活动区域的颜色，只对 mode = flower 模式有效 */
+  color: {
+    type: String,
+    default: '#909399',
+  },
+  /** 提示文本的颜色 */
+  textColor: {
+    type: String,
+    default: '#909399',
+  },
+  /** 文字和图标是否垂直排列 */
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+  /** 模式选择，见官网说明 */
+  mode: {
+    type: String,
+    default: 'spinner',
+  },
+  /** 加载图标的大小，单位px */
+  size: {
+    type: Number,
+    default: 24,
+  },
+  /** 文字大小 */
+  textSize: {
+    type: Number,
+    default: 15,
+  },
+  /** 文字内容 */
+  text: String,
+  /** 动画模式 */
+  timingFunction: {
+    type: String,
+    default: 'ease-in-out',
+  },
+  /** 动画执行周期时间 */
+  duration: {
+    type: Number,
+    default: 1200,
+  },
+  /** mode=circle时的暗边颜色 */
+  inactiveColor: String,
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+})
+const { show, size, color, mode, inactiveColor } = toRefs(props)
 
 //动画旋转角度
-const aniAngel = ref(360);
+const aniAngel = ref(360)
 const array12 = Array.from({
   length: 12,
-});
-const webviewHide = ref(false);
+})
+const webviewHide = ref(false)
 
 const otherBorderColor = computed(() => {
-  const lightColor = colorGradient(color.value, "#ffffff", 100)[80];
-  if (mode.value === "circle") {
-    return inactiveColor.value ? inactiveColor.value : lightColor;
+  const lightColor = colorGradient(color.value, '#ffffff', 100)[80]
+  if (mode.value === 'circle') {
+    return inactiveColor.value ? inactiveColor.value : lightColor
   } else {
-    return "transparent";
+    return 'transparent'
   }
-});
+})
 
 // 监听webview的显示与隐藏
 // const addEventListenerToWebview = () => {
@@ -102,5 +156,5 @@ const otherBorderColor = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>