feat:1.新增water-flow组件，示例demo新增贡献人员信息 (#306)

* feat:1.新增water-flow组件2.示例demo新增贡献人员信息

* fix修改water-flow组件传入类型错误提示信息

Author: aQingYun

dist/water-flow-item/index.js

@@ -1,34 +1,74 @@
+// pages/components/water/index.js
 Component({
     /**
      * 组件的属性列表
      */
-    externalClasses: ['l-class'],
     properties: {
-        columnCount: {
-            type: Number,
-            value: 2
-        },
-        columnGap: {
-            type: String,
-            value: '20rpx'
-        }
-    },
-
-    relations: {
 
     },
 
     /**
      * 组件的初始数据
      */
     data: {
+        data: [],
+        leftData: [],
+        rightData: []
+    },
 
+    attached() {
+        this._init()
     },
 
     /**
      * 组件的方法列表
      */
     methods: {
+        _init() {
+            wx.lin = wx.lin || {}
+            wx.lin.renderWaterFlow = (data = [], success) => {
+                if (Object.prototype.toString.call(data) !== '[object Array]') {
+                    console.error("[data]参数类型错误，渲染失败");
+                    return false;
+                }
+                this._select(data).then(() => {
+                    success && success()
+                })
+            }
+        },
+        _select(data) {
+            const query = wx.createSelectorQuery().in(this)
+            this.columnNodes = query.selectAll('#left, #right')
+
+            return new Promise((resolve, reject) => {
+                this._render(data, 0, () => {
+                    resolve()
+                })
+            })
+        },
+        _render(data, i, success) {
+            if (data.length > i) {
+                this.columnNodes.boundingClientRect().exec(res => {
+                    const rects = res[0]
+                    const leftHeight = rects[0].height
+                    const rightHeight = rects[1].height
 
+                    if (leftHeight <= rightHeight) {
+                        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, success)
+                    })
+                })
+            } else {
+                success && success()
+            }
+        }
     }
 })

dist/water-flow-item/index.json

@@ -1,6 +1,7 @@
 {
     "component": true,
-    "usingComponents": {
-        "l-water-flow-item": "../water-flow-item/index"
+    "usingComponents": {},
+    "componentGenerics": {
+      "l-water-flow-item": true
     }
-}
+  }

dist/water-flow-item/index.wxml

@@ -1,4 +1,16 @@
-<view class="l-class water-flow-container"
-      style="column-count:{{columnCount}};column-gap:{{columnGap}}">
-  <slot/>
+<view class="l-class water-flow-container">
+  <view class="water-column">
+    <view id="left">
+      <block wx:for="{{leftData}}" wx:key="{{index}}">
+        <l-water-flow-item data="{{item}}" />
+      </block>
+    </view>
+  </view>
+  <view class="water-column">
+    <view id="right">
+      <block wx:for="{{rightData}}" wx:key="{{index}}">
+        <l-water-flow-item data="{{item}}" />
+      </block>
+    </view>
+  </view>
 </view>

dist/water-flow-item/index.wxss

@@ -1 +1 @@
-.water-flow-container{margin:0 auto}
+.water-flow-container{display:flex;width:100%;box-sizing:border-box}.water-column{flex:1}