@10yun/cv-mobile-ui 0.5.43 → 0.5.45

package/uview-plus/components/u-waterfall/u-waterfall.vue

@@ -1,24 +1,34 @@
 <template>
   <view class="u-waterfall">
-    <view ref="u-left-column" id="u-left-column" class="u-column">
-      <slot name="left" :leftList="leftList"></slot>
-    </view>
-    <view ref="u-right-column" id="u-right-column" class="u-column">
-      <slot name="right" :rightList="rightList"></slot>
+    <!-- 新增支持多列布局 -->
+    <view
+      v-for="(column, index) in columnList"
+      :key="index"
+      :ref="`u-column-${index}`"
+      :id="`u-column-${index}`"
+      class="u-column"
+    >
+      <slot name="column" :colIndex="index" :colList="column"></slot>
+      <slot name="left" :colIndex="index" :leftList="column"></slot>
+      <template v-if="!$slots['left'] && !$slots['column']" v-for="(item, itemIndex) in column" :key="itemIndex">
+        <slot :item="item" :itemIndex="itemIndex"></slot>
+      </template>
     </view>
   </view>
 </template>
 <script>
 /**
  * waterfall 瀑布流
- * @description 这是一个瀑布流形式的组件，内容分为左右两列，结合uview的懒加载组件效果更佳。相较于某些只是奇偶数左右分别，或者没有利用vue作用域插槽的做法，uview的瀑布流实现了真正的 组件化，搭配LazyLoad 懒加载和loadMore 加载更多组件，让您开箱即用，眼前一亮。
+ * @description 这是一个瀑布流形式的组件，对原组件进行升级已经支持自定义列数模式，便于适配不同屏幕。搭配loadMore 加载更多组件，让您开箱即用，眼前一亮。
  * @tutorial https://uview-plus.jiangruyi.com/components/waterfall.html
  * @property {Array} flow-list 用于渲染的数据
  * @property {String Number} add-time 单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明（默认200）
+ * @property {String Number} columns 瀑布流列数，默认为2，设置为auto时自动根据屏幕宽度调整列数
  * @example <up-waterfall :flowList="flowList"></up-waterfall>
  */
 import { mpMixin } from '../../libs/mixin/mpMixin';
 import { mixin } from '../../libs/mixin/mixin';
+import { sleep } from '../../libs/function/index';
 export default {
   name: 'u-waterfall',
   props: {
@@ -42,7 +52,7 @@ export default {
       }
     },
     // #endif
-    // 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
+    // 每次向结构插入数据的时间间隔，单位ms
     // 单位ms
     addTime: {
       type: [Number, String],
@@ -53,41 +63,98 @@ export default {
     idKey: {
       type: String,
       default: 'id'
+    },
+    // 瀑布流列数
+    columns: {
+      type: [Number, String],
+      default: 2
+    },
+    // 瀑布流最小列数
+    columnsMin: {
+      type: [Number, String],
+      default: 2
+    },
+    // 最小列宽
+    minColumnWidth: {
+      type: Number,
+      default: 230
     }
   },
   mixins: [mpMixin, mixin],
   data() {
     return {
-      leftList: [],
-      rightList: [],
-      tempList: [],
-      children: []
+      columnList: [[]], // 存储每列的数据
+      children: [],
+      // 用于标记是否已经初始化
+      initialized: false,
+      windowWidth: 375,
+      windowHeight: 0
     };
   },
   watch: {
-    copyFlowList(nVal, oVal) {
-      if (!nVal || nVal.length == 0) {
-        this.clear(false);
-        // console.log('clear');
-      } else {
-        // 取差值，即这一次数组变化新增的部分
-        let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
-        // 拼接上原有数据
-        this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
-        this.splitData();
-      }
+    copyFlowList: {
+      handler(nVal, oVal) {
+        if (!nVal || nVal.length == 0) {
+          this.clear(false);
+        } else {
+          if (this.columnList.length == 1) {
+            this.initColumnList();
+          }
+          // 取差值，即这一次数组变化新增的部分
+          let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
+          // 直接处理数据，不再使用tempList和splitData
+          this.handleData(nVal.slice(startIndex));
+        }
+      },
+      immediate: true
+    },
+    columns: {
+      handler() {
+        this.initColumnList();
+        // 重新分配数据
+        if (this.copyFlowList.length > 0) {
+          this.redistributeData();
+        }
+      },
+      immediate: false
     }
   },
+  created() {
+    this.initColumnList();
+  },
   mounted() {
-    this.tempList = this.cloneData(this.copyFlowList);
-    this.splitData();
+    this.initialized = true;
+    // 添加窗口大小变化监听
+    // #ifdef H5
+    if (this.columns === 'auto') {
+      uni.onWindowResize(this.handleWindowResize);
+    }
+    // #endif
+  },
+  // 添加beforeUnmount生命周期清理事件监听
+  // #ifdef VUE3
+  beforeUnmount() {
+    // #ifdef H5
+    if (this.columns === 'auto') {
+      uni.offWindowResize(this.handleWindowResize);
+    }
+    // #endif
+  },
+  // #endif
+  // #ifdef VUE2
+  beforeDestroy() {
+    // #ifdef H5
+    if (this.columns === 'auto') {
+      window.removeEventListener('resize', this.handleWindowResize);
+    }
+    // #endif
   },
+  // #endif
   computed: {
     // 破坏flowList变量的引用，否则watch的结果新旧值是一样的
     copyFlowList() {
       // #ifdef VUE3
       if (!this.modelValue || this.modelValue.length == 0) {
-        this.clear(false);
         // console.log('clear');
         return [];
       } else {
@@ -99,38 +166,119 @@ export default {
       // #endif
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'after-add-one', 'after-add-all'],
   methods: {
-    async splitData() {
-      if (!this.tempList.length) return;
-      let leftRect = await this.$uGetRect('#u-left-column');
-      let rightRect = await this.$uGetRect('#u-right-column');
-      // 如果左边小于或等于右边，就添加到左边，否则添加到右边
-      let item = this.tempList[0];
-      // 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
-      // 数组可能变成[]，导致此item值可能为undefined
-      if (!item) return;
-      if (leftRect.height < rightRect.height) {
-        this.leftList.push(item);
-      } else if (leftRect.height > rightRect.height) {
-        this.rightList.push(item);
-      } else {
-        // 这里是为了保证第一和第二张添加时，左右都能有内容
-        // 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
-        if (this.leftList.length <= this.rightList.length) {
-          this.leftList.push(item);
-        } else {
-          this.rightList.push(item);
+    // 初始化列数据数组
+    initColumnList() {
+      this.windowWidth = uni.getSystemInfoSync().windowWidth;
+      const cols = this.getColumnsCount();
+      // console.log(cols)
+      this.columnList = Array.from({ length: cols }, () => []);
+    },
+    // 获取列数，支持auto模式
+    getColumnsCount() {
+      if (this.columns === 'auto') {
+        // 列间距为10rpx(约等于7px)
+        const columnGap = 7;
+        // 计算可容纳的列数
+        let columnCount = Math.max(1, Math.floor(this.windowWidth / (this.minColumnWidth + columnGap)));
+        if (columnCount < this.columnsMin) {
+          columnCount = this.columnsMin;
+        }
+        return columnCount;
+      }
+      return parseInt(this.columns) || 2;
+    },
+    // 窗口大小变化处理函数
+    handleWindowResize(res) {
+      this.windowWidth = res.size.windowWidth;
+      this.windowHeight = res.size.windowHeight;
+      // 防抖处理，避免频繁触发
+      if (this.resizeTimer) {
+        clearTimeout(this.resizeTimer);
+      }
+      this.resizeTimer = setTimeout(() => {
+        const newColumnsCount = this.getColumnsCount();
+        const oldColumnsCount = this.columnList.length;
+        // 只有列数发生变化时才重新分配数据
+        if (newColumnsCount !== oldColumnsCount) {
+          this.redistributeData();
+        }
+      }, 300);
+    },
+    // 重新分配所有数据
+    async redistributeData() {
+      // 清空所有列
+      this.initColumnList();
+      // 保存所有数据
+      const allData = this.cloneData(this.copyFlowList);
+      // 重新分配数据
+      this.handleData(allData);
+    },
+    // 处理新增数据
+    async handleData(newData) {
+      if (!newData || newData.length === 0) return;
+      // 初始化列高度数组
+      const columnHeights = new Array(this.columnList.length).fill(0);
+      // 获取各列当前高度
+      for (let i = 0; i < this.columnList.length; i++) {
+        try {
+          const rect = await this.$uGetRect(`#u-column-${i}`);
+          // console.log(`#u-column-${i}`, rect.height)
+          columnHeights[i] = rect.height || 0;
+        } catch (e) {
+          columnHeights[i] = 0;
         }
       }
-      // 移除临时列表的第一项
-      this.tempList.splice(0, 1);
-      // 如果临时数组还有数据，继续循环
-      if (this.tempList.length) {
-        setTimeout(() => {
-          this.splitData();
-        }, this.addTime);
+      // 分配新数据到最短的列
+      for (let item of newData) {
+        const minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights));
+        // console.log('this.columnList', this.columnList)
+        this.columnList[minHeightIndex].push(item);
+        // 获取实际渲染后的元素高度而不是估算
+        await sleep(this.addTime);
+        await this.$nextTick(async () => {
+          try {
+            const rect = await this.$uGetRect(`#u-column-${minHeightIndex}`);
+            // console.log(`#u-column-${minHeightIndex}`, rect.height)
+            if (rect.height) {
+              columnHeights[minHeightIndex] = rect.height;
+              // 加载一个后置事件
+              this.$emit('after-add-one', {
+                ...item,
+                height: rect.height
+              });
+            }
+          } catch (e) {
+            // console.log(e)
+            // columnHeights[i] = 0;
+          }
+        });
+        // this.$nextTick(async () => {
+        //     try {
+        //         // 等待DOM更新后获取实际高度
+        //         const lastIndex = this.columnList[minHeightIndex].length - 1;
+        //         const el = this.$refs[`u-column-${minHeightIndex}`][0].children[lastIndex];
+        //         if (el) {
+        //             const rect = await this.$uGetRect(el);
+        //             const actualHeight = rect.height || 100;
+        //             columnHeights[minHeightIndex] += actualHeight;
+        //         } else {
+        //             // 备用方案：如果无法获取实际高度，则使用默认值
+        //             columnHeights[minHeightIndex] += 100;
+        //         }
+        //     } catch (e) {
+        //         // 出错时使用默认高度
+        //         console.log(e)
+        //         columnHeights[minHeightIndex] += 100;
+        //     }
+        // });
       }
+      // 加载所有后置事件
+      this.$emit('after-add-all', {
+        columnHeights: columnHeights,
+        newData: newData
+      });
     },
     // 复制而不是引用对象和数组
     cloneData(data) {
@@ -138,8 +286,7 @@ export default {
     },
     // 清空数据列表
     clear(bak = true) {
-      this.leftList = [];
-      this.rightList = [];
+      this.initColumnList();
       // 同时清除父组件列表中的数据
       if (bak) {
         // #ifdef VUE2
@@ -149,67 +296,67 @@ export default {
         this.$emit('update:modelValue', []);
         // #endif
       }
-      this.tempList = [];
     },
     // 清除某一条指定的数据，根据id实现
     remove(id) {
-      // 如果findIndex找不到合适的条件，就会返回-1
-      let index = -1;
-      index = this.leftList.findIndex((val) => val[this.idKey] == id);
-      if (index != -1) {
-        // 如果index不等于-1，说明已经找到了要找的id，根据index索引删除这一条数据
-        this.leftList.splice(index, 1);
-      } else {
-        // 同理于上方面的方法
-        index = this.rightList.findIndex((val) => val[this.idKey] == id);
-        if (index != -1) this.rightList.splice(index, 1);
+      // 遍历所有列查找并删除数据
+      for (let i = 0; i < this.columnList.length; i++) {
+        const index = this.columnList[i].findIndex((val) => val[this.idKey] == id);
+        if (index !== -1) {
+          this.columnList[i].splice(index, 1);
+          break;
+        }
       }
       // 同时清除父组件的数据中的对应id的条目
       // #ifdef VUE2
-      index = this.value.findIndex((val) => val[this.idKey] == id);
-      if (index != -1) this.$emit('input', this.value.splice(index, 1));
+      const valueIndex = this.value.findIndex((val) => val[this.idKey] == id);
+      if (valueIndex !== -1) {
+        const newValue = this.cloneData(this.value);
+        newValue.splice(valueIndex, 1);
+        this.$emit('input', newValue);
+      }
       // #endif
       // #ifdef VUE3
-      index = this.modelValue.findIndex((val) => val[this.idKey] == id);
-      if (index != -1) this.$emit('update:modelValue', this.modelValue.splice(index, 1));
+      const modelValueIndex = this.modelValue.findIndex((val) => val[this.idKey] == id);
+      if (modelValueIndex !== -1) {
+        const newModelValue = this.cloneData(this.modelValue);
+        newModelValue.splice(modelValueIndex, 1);
+        this.$emit('update:modelValue', newModelValue);
+      }
       // #endif
     },
     // 修改某条数据的某个属性
     modify(id, key, value) {
-      // 如果findIndex找不到合适的条件，就会返回-1
-      let index = -1;
-      index = this.leftList.findIndex((val) => val[this.idKey] == id);
-      if (index != -1) {
-        // 如果index不等于-1，说明已经找到了要找的id，修改对应key的值
-        this.leftList[index][key] = value;
-      } else {
-        // 同理于上方面的方法
-        index = this.rightList.findIndex((val) => val[this.idKey] == id);
-        if (index != -1) this.rightList[index][key] = value;
+      let found = false;
+      let targetItem = null;
+      // 在所有列中查找数据
+      for (let i = 0; i < this.columnList.length; i++) {
+        const index = this.columnList[i].findIndex((val) => val[this.idKey] == id);
+        if (index !== -1) {
+          // 修改对应key的值
+          this.columnList[i][index][key] = value;
+          targetItem = this.columnList[i][index];
+          found = true;
+          break;
+        }
       }
-      // 修改父组件的数据中的对应id的条目
-      // #ifdef VUE2
-      index = this.value.findIndex((val) => val[this.idKey] == id);
-      // #endif
-      // #ifdef VUE3
-      index = this.modelValue.findIndex((val) => val[this.idKey] == id);
-      // #endif
-      if (index != -1) {
-        // 首先复制一份value的数据
+      if (found && targetItem) {
+        // 修改父组件的数据中的对应id的条目
         // #ifdef VUE2
-        let data = this.cloneData(this.value);
-        // #endif
-        // #ifdef VUE3
-        let data = this.cloneData(this.modelValue);
-        // #endif
-        // 修改对应索引的key属性的值为value
-        data[index][key] = value;
-        // 修改父组件通过v-model绑定的变量的值
-        // #ifdef VUE2
-        this.$emit('input', data);
+        const valueIndex = this.value.findIndex((val) => val[this.idKey] == id);
+        if (valueIndex !== -1) {
+          let data = this.cloneData(this.value);
+          data[valueIndex][key] = value;
+          this.$emit('input', data);
+        }
         // #endif
         // #ifdef VUE3
-        this.$emit('update:modelValue', data);
+        const modelValueIndex = this.modelValue.findIndex((val) => val[this.idKey] == id);
+        if (modelValueIndex !== -1) {
+          let data = this.cloneData(this.modelValue);
+          data[modelValueIndex][key] = value;
+          this.$emit('update:modelValue', data);
+        }
         // #endif
       }
     }

package/uview-plus/index.css

@@ -7,8 +7,8 @@
   flex: 1;
   /* #endif */
   /* #ifndef APP-NVUE */
-  display: -webkit-box !important;
   overflow: hidden;
+  display: -webkit-box !important;
   text-overflow: ellipsis;
   word-break: break-all;
   -webkit-line-clamp: 1;
@@ -254,6 +254,35 @@
   /* #endif */
 }
 
+/* #ifndef APP-NVUE */
+.u-empty,
+.u-empty__wrap,
+.u-transition,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-transition,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+
+/* #endif */
 .u-flex,
 .u-flex-row,
 .u-flex-x,
@@ -264,6 +293,8 @@
   display: flex;
   /* #endif */
   flex-direction: row;
+  display: flex !important;
+  flex-direction: row !important;
 }
 
 .u-flex-y,

package/uview-plus/index.js

@@ -1,5 +1,3 @@
-// 全局挂载引入http相关请求拦截插件
-// import Request from 'luch-request';
 // 看到此报错，是因为没有配置vite.config.js的【transpileDependencies】
 // const pleaseSetTranspileDependencies = {}, babelTest = pleaseSetTranspileDependencies?.test
 
@@ -7,7 +5,6 @@
 import { mixin } from './libs/mixin/mixin.js';
 // 小程序特有的mixin
 import { mpMixin } from './libs/mixin/mpMixin.js';
-
 // 路由封装
 import route from './libs/util/route.js';
 // 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制
@@ -21,8 +18,10 @@ import debounce from './libs/function/debounce.js';
 import throttle from './libs/function/throttle.js';
 // 浮点计算
 import calc from './libs/function/calc.js';
+// 浮点计算
+import digit from './libs/function/digit.js';
 // 公共文件写入的方法
-import index from './libs/function/index.js';
+import index, { rpx2px } from './libs/function/index.js';
 
 // 配置信息
 import config from './libs/config/config.js';
@@ -38,15 +37,41 @@ import platform from './libs/function/platform';
 // http
 import http from './libs/function/http.js';
 
-// #ifdef MP
-import { mpShare } from './libs/mixin/mpShare.js';
-// #endif
+// fontUtil
+import fontUtil from './components/u-icon/util.js';
+
+// i18n
+import i18n, { t } from './libs/i18n/index.js';
 
 // 导出
 let themeType = ['primary', 'success', 'error', 'warning', 'info'];
-export { route, http, debounce, throttle, calc, platform, themeType, mixin, mpMixin, props, color, test, zIndex };
+export {
+  route,
+  http,
+  debounce,
+  throttle,
+  calc,
+  digit,
+  platform,
+  themeType,
+  mixin,
+  mpMixin,
+  props,
+  color,
+  test,
+  zIndex,
+  fontUtil,
+  i18n,
+  rpx2px,
+  t
+};
 export * from './libs/function/index.js';
 export * from './libs/function/colorGradient.js';
+
+// #ifdef MP
+import { mpShare } from './libs/mixin/mpShare.js';
+// #endif
+
 /**
  * 自定义方法
  */
@@ -84,7 +109,7 @@ const $u = {
   calc,
   mixin,
   mpMixin,
-  props,
+  // props,
   ...index,
   color,
   platform,

package/uview-plus/index.scss

@@ -1,5 +1,6 @@
 // 引入公共基础类
 @import "./libs/css/common.scss";
+@import "./libs/css/components.scss";
 @import "./libs/css/flex.scss";
 @import "./libs/css/color.scss";