fix:解决water-flow组件bug (#358)

Author: aQingYun

components/water-flow/index.js renamed to dist/water-flow/index.js

@@ -2,6 +2,6 @@
     "component": true,
     "usingComponents": {},
     "componentGenerics": {
-      "l-water-flow-item": true
+      "l-water-flow-item": "true"
     }
   }

components/water-flow/index.json renamed to dist/water-flow/index.json

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

components/water-flow/index.wxml renamed to dist/water-flow/index.wxml

@@ -0,0 +1,77 @@
+// pages/components/water/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        columnGap: {
+            type: String,
+            value: '20rpx'
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    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()
+            }
+        }
+    }
+})

components/water-flow/index.wxss renamed to dist/water-flow/index.wxss

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {},
+    "componentGenerics": {
+      "l-water-flow-item": "true"
+    }
+  }

examples/dist/water-flow/index.json

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

src/water-flow/index.js

@@ -0,0 +1,16 @@
+<view class="l-class water-flow-container">
+  <view class="water-column" style="margin-right:{{columnGap}}">
+    <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>