416 lines
16 KiB
Vue
416 lines
16 KiB
Vue
<template>
|
||
<view class="u-waterfall">
|
||
<!-- 新增支持多列布局 -->
|
||
<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 这是一个瀑布流形式的组件，对原组件进行升级已经支持自定义列数模式，便于适配不同屏幕。搭配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 <u-waterfall :flowList="flowList"></u-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: {
|
||
// #ifdef VUE2
|
||
value: {
|
||
// 瀑布流数据
|
||
type: Array,
|
||
required: true,
|
||
default: function() {
|
||
return [];
|
||
}
|
||
},
|
||
// #endif
|
||
// #ifdef VUE3
|
||
modelValue: {
|
||
// 瀑布流数据
|
||
type: Array,
|
||
required: true,
|
||
default: function() {
|
||
return [];
|
||
}
|
||
},
|
||
// #endif
|
||
// 每次向结构插入数据的时间间隔，单位ms
|
||
// 单位ms
|
||
addTime: {
|
||
type: [Number, String],
|
||
default: 200
|
||
},
|
||
// id值，用于清除某一条数据时，根据此idKey名称找到并移除，如数据为{idx: 22, name: 'lisa'}
|
||
// 那么该把idKey设置为idx
|
||
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 {
|
||
columnList: [[]], // 存储每列的数据
|
||
children: [],
|
||
// 用于标记是否已经初始化
|
||
initialized: false,
|
||
windowWidth: 375,
|
||
windowHeight: 0
|
||
}
|
||
},
|
||
watch: {
|
||
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.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) {
|
||
// console.log('clear');
|
||
return [];
|
||
} else {
|
||
return this.cloneData(this.modelValue);
|
||
}
|
||
// #endif
|
||
// #ifdef VUE2
|
||
return this.cloneData(this.value);
|
||
// #endif
|
||
}
|
||
},
|
||
emits: ['update:modelValue', 'after-add-one', 'after-add-all'],
|
||
methods: {
|
||
// 初始化列数据数组
|
||
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;
|
||
}
|
||
}
|
||
|
||
// 分配新数据到最短的列
|
||
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) {
|
||
return JSON.parse(JSON.stringify(data));
|
||
},
|
||
|
||
// 清空数据列表
|
||
clear(bak = true) {
|
||
this.initColumnList();
|
||
// 同时清除父组件列表中的数据
|
||
if (bak) {
|
||
// #ifdef VUE2
|
||
this.$emit('input', []);
|
||
// #endif
|
||
// #ifdef VUE3
|
||
this.$emit('update:modelValue', []);
|
||
// #endif
|
||
}
|
||
},
|
||
|
||
// 清除某一条指定的数据，根据id实现
|
||
remove(id) {
|
||
// 遍历所有列查找并删除数据
|
||
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
|
||
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
|
||
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) {
|
||
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;
|
||
}
|
||
}
|
||
|
||
if (found && targetItem) {
|
||
// 修改父组件的数据中的对应id的条目
|
||
// #ifdef VUE2
|
||
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
|
||
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
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.u-waterfall {
|
||
@include flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.u-column {
|
||
@include flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
/* #ifndef APP-NVUE */
|
||
height: 100%;
|
||
/* #endif */
|
||
// 添加列之间的间距
|
||
&:not(:first-child) {
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.u-image {
|
||
/* #ifndef APP-NVUE */
|
||
max-width: 100%;
|
||
/* #endif */
|
||
}
|
||
</style> |