Component({ /** * 组件的属性列表 */ properties: { columnGap: { type: String, value: '20rpx' } }, /** * 组件的初始数据 */ data: { data: [], leftData: [], rightData: [] }, attached() { this._init(); }, pageLifetimes: { show() { this._init(); } }, /** * 组件的方法列表 */ methods: { _init() { wx.lin = wx.lin || {}; wx.lin.renderWaterFlow = (data = [], refresh = false, success) => { if (Object.prototype.toString.call(data) !== '[object Array]') { console.error('[data]参数类型错误,渲染失败'); return false; } // 绑定data,判断data是否为[] this.setData({ data }); if (refresh) { this.data.leftData = []; this.data.rightData = []; } this._select(data, refresh).then(() => { success && success(); }); }; }, _select(data, refresh) { const query = wx.createSelectorQuery().in(this); this.columnNodes = query.selectAll('#left, #right'); return new Promise((resolve) => { this._render(data, 0, refresh, () => { resolve(); }); }); }, _render(data, i, refresh, success) { if ((data.length > i || refresh) && this.data.data.length !== 0) { this.columnNodes.boundingClientRect().exec(res => { const rects = res[0]; this.data.leftHeight = rects[0].height; this.data.rightHeight = rects[1].height; if (this.data.leftHeight <= this.data.rightHeight || refresh) { this.data.leftData.push(data[i]); } else { this.data.rightData.push(data[i]); } this.setData({ leftData: this.data.leftData, rightData: this.data.rightData }, () => { this._render(data, ++i, false, success); }); }); } else { success && success(); } } } });