From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-waterfall/u-waterfall.vue | 176 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 176 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-waterfall/u-waterfall.vue b/uview-ui/components/u-waterfall/u-waterfall.vue
new file mode 100644
index 0000000..31964b7
--- /dev/null
+++ b/uview-ui/components/u-waterfall/u-waterfall.vue
@@ -0,0 +1,176 @@
+<template>
+ <view class="u-waterfall">
+ <view id="u-left-column" class="u-column"><slot name="left" :leftList="leftList"></slot></view>
+ <view id="u-right-column" class="u-column"><slot name="right" :rightList="rightList"></slot></view>
+ </view>
+</template>
+
+<script>
+/**
+ * waterfall 鐎戝竷娴�
+ * @description 杩欐槸涓�涓�戝竷娴佸舰寮忕殑缁勪欢锛屽唴瀹瑰垎涓哄乏鍙充袱鍒楋紝缁撳悎uView鐨勬噿鍔犺浇缁勪欢鏁堟灉鏇翠匠銆傜浉杈冧簬鏌愪簺鍙槸濂囧伓鏁板乏鍙冲垎鍒紝鎴栬�呮病鏈夊埄鐢╲ue浣滅敤鍩熸彃妲界殑鍋氭硶锛寀View鐨勭�戝竷娴佸疄鐜颁簡鐪熸鐨� 缁勪欢鍖栵紝鎼厤LazyLoad 鎳掑姞杞藉拰loadMore 鍔犺浇鏇村缁勪欢锛岃鎮ㄥ紑绠卞嵆鐢紝鐪煎墠涓�浜��
+ * @tutorial https://www.uviewui.com/components/waterfall.html
+ * @property {Array} flow-list 鐢ㄤ簬娓叉煋鐨勬暟鎹�
+ * @property {String Number} add-time 鍗曟潯鏁版嵁娣诲姞鍒伴槦鍒楃殑鏃堕棿闂撮殧锛屽崟浣峬s锛岃涓婃柟娉ㄦ剰浜嬮」璇存槑锛堥粯璁�200锛�
+ * @example <u-waterfall :flowList="flowList"></u-waterfall>
+ */
+export default {
+ name: "u-waterfall",
+ props: {
+ value: {
+ // 鐎戝竷娴佹暟鎹�
+ type: Array,
+ required: true,
+ default: function() {
+ return [];
+ }
+ },
+ // 姣忔鍚戠粨鏋勬彃鍏ユ暟鎹殑鏃堕棿闂撮殧锛岄棿闅旇秺闀匡紝瓒婅兘淇濊瘉涓ゅ垪楂樺害鐩歌繎锛屼絾鏄鐢ㄦ埛浣撻獙瓒婁笉濂�
+ // 鍗曚綅ms
+ addTime: {
+ type: [Number, String],
+ default: 200
+ },
+ // id鍊硷紝鐢ㄤ簬娓呴櫎鏌愪竴鏉℃暟鎹椂锛屾牴鎹idKey鍚嶇О鎵惧埌骞剁Щ闄わ紝濡傛暟鎹负{idx: 22, name: 'lisa'}
+ // 閭ｄ箞璇ユ妸idKey璁剧疆涓篿dx
+ idKey: {
+ type: String,
+ default: 'id'
+ }
+ },
+ data() {
+ return {
+ leftList: [],
+ rightList: [],
+ tempList: [],
+ children: []
+ }
+ },
+ watch: {
+ copyFlowList(nVal, oVal) {
+ // 鍙栧樊鍊硷紝鍗宠繖涓�娆℃暟缁勫彉鍖栨柊澧炵殑閮ㄥ垎
+ let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
+ // 鎷兼帴涓婂師鏈夋暟鎹�
+ this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
+ this.splitData();
+ }
+ },
+ mounted() {
+ this.tempList = this.cloneData(this.copyFlowList);
+ this.splitData();
+ },
+ computed: {
+ // 鐮村潖flowList鍙橀噺鐨勫紩鐢紝鍚﹀垯watch鐨勭粨鏋滄柊鏃у�兼槸涓�鏍风殑
+ copyFlowList() {
+ return this.cloneData(this.value);
+ }
+ },
+ 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);
+ }
+ }
+ // 绉婚櫎涓存椂鍒楄〃鐨勭涓�椤�
+ this.tempList.splice(0, 1);
+ // 濡傛灉涓存椂鏁扮粍杩樻湁鏁版嵁锛岀户缁惊鐜�
+ if (this.tempList.length) {
+ setTimeout(() => {
+ this.splitData();
+ }, this.addTime)
+ }
+ },
+ // 澶嶅埗鑰屼笉鏄紩鐢ㄥ璞″拰鏁扮粍
+ cloneData(data) {
+ return JSON.parse(JSON.stringify(data));
+ },
+ // 娓呯┖鏁版嵁鍒楄〃
+ clear() {
+ this.leftList = [];
+ this.rightList = [];
+ // 鍚屾椂娓呴櫎鐖剁粍浠跺垪琛ㄤ腑鐨勬暟鎹�
+ this.$emit('input', []);
+ this.tempList = [];
+ },
+ // 娓呴櫎鏌愪竴鏉℃寚瀹氱殑鏁版嵁锛屾牴鎹甶d瀹炵幇
+ remove(id) {
+ // 濡傛灉findIndex鎵句笉鍒板悎閫傜殑鏉′欢锛屽氨浼氳繑鍥�-1
+ let index = -1;
+ index = this.leftList.findIndex(val => val[this.idKey] == id);
+ if(index != -1) {
+ // 濡傛灉index涓嶇瓑浜�-1锛岃鏄庡凡缁忔壘鍒颁簡瑕佹壘鐨刬d锛屾牴鎹甶ndex绱㈠紩鍒犻櫎杩欎竴鏉℃暟鎹�
+ this.leftList.splice(index, 1);
+ } else {
+ // 鍚岀悊浜庝笂鏂归潰鐨勬柟娉�
+ index = this.rightList.findIndex(val => val[this.idKey] == id);
+ if(index != -1) this.rightList.splice(index, 1);
+ }
+ // 鍚屾椂娓呴櫎鐖剁粍浠剁殑鏁版嵁涓殑瀵瑰簲id鐨勬潯鐩�
+ index = this.value.findIndex(val => val[this.idKey] == id);
+ if(index != -1) this.$emit('input', this.value.splice(index, 1));
+ },
+ // 淇敼鏌愭潯鏁版嵁鐨勬煇涓睘鎬�
+ modify(id, key, value) {
+ // 濡傛灉findIndex鎵句笉鍒板悎閫傜殑鏉′欢锛屽氨浼氳繑鍥�-1
+ let index = -1;
+ index = this.leftList.findIndex(val => val[this.idKey] == id);
+ if(index != -1) {
+ // 濡傛灉index涓嶇瓑浜�-1锛岃鏄庡凡缁忔壘鍒颁簡瑕佹壘鐨刬d锛屼慨鏀瑰搴攌ey鐨勫��
+ this.leftList[index][key] = value;
+ } else {
+ // 鍚岀悊浜庝笂鏂归潰鐨勬柟娉�
+ index = this.rightList.findIndex(val => val[this.idKey] == id);
+ if(index != -1) this.rightList[index][key] = value;
+ }
+ // 淇敼鐖剁粍浠剁殑鏁版嵁涓殑瀵瑰簲id鐨勬潯鐩�
+ index = this.value.findIndex(val => val[this.idKey] == id);
+ if(index != -1) {
+ // 棣栧厛澶嶅埗涓�浠絭alue鐨勬暟鎹�
+ let data = this.cloneData(this.value);
+ // 淇敼瀵瑰簲绱㈠紩鐨刱ey灞炴�х殑鍊间负value
+ data[index][key] = value;
+ // 淇敼鐖剁粍浠堕�氳繃v-model缁戝畾鐨勫彉閲忕殑鍊�
+ this.$emit('input', data);
+ }
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-waterfall {
+ @include vue-flex;
+ flex-direction: row;
+ align-items: flex-start;
+}
+
+.u-column {
+ @include vue-flex;
+ flex: 1;
+ flex-direction: column;
+ height: auto;
+}
+
+.u-image {
+ width: 100%;
+}
+</style>
--
Gitblit v1.9.3