From eff6b8ff302fd6c7dc7a572827824d9c137bc031 Mon Sep 17 00:00:00 2001
From: zgrong <zhangfengguangrong@163.com>
Date: Sun, 15 Jul 2018 14:35:34 +0800
Subject: [PATCH] =?UTF-8?q?[improvement]=20LoadMore:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=A1=A8=E7=8E=B0=E5=8F=8A=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=20(#337)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: loadmore组件

* fix: loadmore文档完善

* fix: loadmore组件完善

* fix: loadmore MD更新
---
 example/app.json                              |  3 +-
 example/pages/dashboard/config.js             |  3 +
 .../pages/{loadmore_bak => loadmore}/index.js |  0
 example/pages/loadmore/index.json             |  8 ++
 example/pages/loadmore/index.wxml             | 11 +++
 example/pages/loadmore/index.wxss             |  5 ++
 example/pages/loadmore_bak/index.json         |  3 -
 example/pages/loadmore_bak/index.wxml         |  9 --
 packages/loadmore/README.md                   | 36 ++++----
 packages/loadmore/index.js                    | 12 +++
 packages/loadmore/index.json                  |  3 +
 packages/loadmore/index.pcss                  | 87 +++++++------------
 packages/loadmore/index.wxml                  | 32 +++----
 13 files changed, 103 insertions(+), 109 deletions(-)
 rename example/pages/{loadmore_bak => loadmore}/index.js (100%)
 create mode 100644 example/pages/loadmore/index.json
 create mode 100644 example/pages/loadmore/index.wxml
 create mode 100644 example/pages/loadmore/index.wxss
 delete mode 100644 example/pages/loadmore_bak/index.json
 delete mode 100644 example/pages/loadmore_bak/index.wxml
 create mode 100644 packages/loadmore/index.js
 create mode 100644 packages/loadmore/index.json

diff --git a/example/app.json b/example/app.json
index 07c44601..d4e2ccc9 100644
--- a/example/app.json
+++ b/example/app.json
@@ -27,7 +27,8 @@
     "pages/toast/index",
     "pages/tree-select/index",
     "pages/select/index",
-    "pages/datetime/index"
+    "pages/datetime/index",
+    "pages/loadmore/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#FAFAFA",
diff --git a/example/pages/dashboard/config.js b/example/pages/dashboard/config.js
index c04b7929..6c588003 100644
--- a/example/pages/dashboard/config.js
+++ b/example/pages/dashboard/config.js
@@ -62,6 +62,9 @@ export default {
       }, {
         name: 'Tag 标记',
         path: '/pages/tag/index'
+      }, {
+        name: 'Loadmore 加载更多',
+        path: '/pages/loadmore/index'
       }
     ]
   },
diff --git a/example/pages/loadmore_bak/index.js b/example/pages/loadmore/index.js
similarity index 100%
rename from example/pages/loadmore_bak/index.js
rename to example/pages/loadmore/index.js
diff --git a/example/pages/loadmore/index.json b/example/pages/loadmore/index.json
new file mode 100644
index 00000000..f182cecd
--- /dev/null
+++ b/example/pages/loadmore/index.json
@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "loadmore 加载",
+  "usingComponents": {
+    "zan-panel": "../../dist/panel/index",
+    "zan-loadmore": "../../dist/loadmore/index",
+    "doc-page": "../../components/doc-page/index"
+  }
+}
diff --git a/example/pages/loadmore/index.wxml b/example/pages/loadmore/index.wxml
new file mode 100644
index 00000000..c0949921
--- /dev/null
+++ b/example/pages/loadmore/index.wxml
@@ -0,0 +1,11 @@
+<doc-page title="LOADMORE" without-padding>
+  <zan-panel title="nodata">
+    <zan-loadmore type="text"></zan-loadmore>
+  </zan-panel>
+  <zan-panel title="loading">
+    <zan-loadmore type="loading"></zan-loadmore>
+  </zan-panel>
+  <zan-panel title="text">
+      <zan-loadmore type="text" text="暂无数据"></zan-loadmore>
+  </zan-panel>
+</doc-page>
\ No newline at end of file
diff --git a/example/pages/loadmore/index.wxss b/example/pages/loadmore/index.wxss
new file mode 100644
index 00000000..1767a3f0
--- /dev/null
+++ b/example/pages/loadmore/index.wxss
@@ -0,0 +1,5 @@
+
+
+zan-loadmore {
+  margin: 15px;
+}
diff --git a/example/pages/loadmore_bak/index.json b/example/pages/loadmore_bak/index.json
deleted file mode 100644
index a9b5f329..00000000
--- a/example/pages/loadmore_bak/index.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "navigationBarTitleText": "Loadmore 加载"
-}
diff --git a/example/pages/loadmore_bak/index.wxml b/example/pages/loadmore_bak/index.wxml
deleted file mode 100644
index bba9b1ed..00000000
--- a/example/pages/loadmore_bak/index.wxml
+++ /dev/null
@@ -1,9 +0,0 @@
-<import src="/dist/loadmore/index.wxml" />
-<view class="container">
-
-  <view class="doc-title zan-hairline--bottom">LOADMORE</view>
-
-  <template is="zan-loadmore" data="{{ loading: true }}" />
-  <template is="zan-loadmore" data="{{ nodata: true }}" />
-  <template is="zan-loadmore" data="{{ nomore: true }}" />
-</view>
diff --git a/packages/loadmore/README.md b/packages/loadmore/README.md
index 8a10856c..9231ca41 100644
--- a/packages/loadmore/README.md
+++ b/packages/loadmore/README.md
@@ -1,26 +1,26 @@
 ## Loadmore 加载
 
 ### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 index.json 中引入组件
+```json
+  {
+    ...
+    "usingComponents": {
+      "zan-loadmore": "../../dist/loadmore/index"
+    }
+    ...
+  }
 ```
 
-在需要使用的页面里引入组件库模板
+在页面上直接使用 zan-loadmore 标签即可
 ```html
-<import src="path/to/zanui-weapp/dist/loadmore/index.wxml" />
-
-<!-- 直接使用 zan-loadmore 模板，并且直接传入设置值 -->
-<template is="zan-loadmore" data="{{ loading: true }}"></template>
+  <zan-loadmore type="text"></zan-loadmore>
+  <zan-loadmore type="loading"></zan-loadmore>
+  <zan-loadmore type="text" text="暂无数据"></zan-loadmore>
 ```
 
-### 代码演示
-`loadmore` 支持三种状态，loading, nodata, nomore。传入指定的值即可显示
-```html
-<!-- 加载更多 -->
-<template is="zan-loadmore" data="{{ loading: true }}"></template>
-<!-- 没有可以显示的数据 -->
-<template is="zan-loadmore" data="{{ nodata: true }}"></template>
-<!-- 没有更多的数据了 -->
-<template is="zan-loadmore" data="{{ nomore: true }}"></template>
-```
+### 具体参数
+| 名称    | 类型            | 是否必须 | 默认  | 描述              |
+| ------- | --------------- | -------- | ----- | ----------------- |
+| type  | String | 是       | loading | 可选`loading`, `text` |
+| text  | String | 否       | 暂无数据 | 文案 |
diff --git a/packages/loadmore/index.js b/packages/loadmore/index.js
new file mode 100644
index 00000000..e5ac6ac2
--- /dev/null
+++ b/packages/loadmore/index.js
@@ -0,0 +1,12 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 'loading'
+    },
+    text: {
+      type: String,
+      value: ''
+    }
+  }
+});
diff --git a/packages/loadmore/index.json b/packages/loadmore/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/loadmore/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/packages/loadmore/index.pcss b/packages/loadmore/index.pcss
index 419096c1..a4f64de5 100644
--- a/packages/loadmore/index.pcss
+++ b/packages/loadmore/index.pcss
@@ -1,12 +1,36 @@
 @import "../common/_mixins";
 
 .zan-loadmore {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+}
+
+.zan-loadmore__line {
+  flex: 1;
+  height: 1px;
   position: relative;
-  width: 65%;
-  margin: 21px auto;
-  line-height: 20px;
-  font-size: 14px;
-  text-align: center;
+
+  &::after {
+    @mixin hairline;
+    border-bottom-width: 1px;
+  }
+}
+
+.zan-loadmore__text, .zan-loadmore__dot {
+  margin: 0 5px;
+}
+
+.zan-loadmore__dot {
+  content: "";
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: #E5E5E5;
+  display: inline-block;
   vertical-align: middle;
 }
 
@@ -21,58 +45,9 @@
   background-size: 100%;
 }
 
-.zan-loadmore .zan-loading {
-  margin-right: 4px;
-}
-
 .zan-loadmore__tips {
   display: inline-block;
   vertical-align: middle;
-  height: 20px;
-  line-height: 20px;
-}
-
-.zan-loadmore--nodata,
-.zan-loadmore--nomore {
-  color: #999;
-
-  &::after {
-    @mixin hairline;
-    border-top-width: 1px;
-  }
-}
-
-.zan-loadmore--nodata {
-  margin-top: 120px;
-}
-
-.zan-loadmore--nodata .zan-loadmore__tips {
-  position: relative;
-  top: -11px;
-  background: #f9f9f9;
-  padding: 0 6px;
-  z-index: 1;
-}
-
-.zan-loadmore--nomore .zan-loadmore__tips {
-  position: relative;
-  top: -11px;
-  background: #f9f9f9;
-  padding: 0 6px;
-  z-index: 1;
-}
-
-.zan-loadmore__dot {
-  position: absolute;
-  left: 50%;
-  top: 10px;
-  margin-left: -2px;
-  margin-top: -2px;
-  content: " ";
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: #E5E5E5;
-  display: inline-block;
-  vertical-align: middle;
+  height: 24px;
+  line-height: 24px;
 }
diff --git a/packages/loadmore/index.wxml b/packages/loadmore/index.wxml
index 8c41cf40..af349a81 100644
--- a/packages/loadmore/index.wxml
+++ b/packages/loadmore/index.wxml
@@ -1,24 +1,12 @@
-<template name="zan-loadmore">
-
-  <block wx:if="{{nomore}}">
-    <view class="zan-loadmore zan-loadmore--nomore">
-      <view class="zan-loadmore__tips">
-        <view class="zan-loadmore__dot"></view>
-      </view>
-    </view>
+<view class="zan-loadmore">
+  <block wx:if="{{ type === 'loading' }}">
+    <view class="zan-loading"></view>
+    <view class="zan-loadmore__tips">加载中...</view>
   </block>
-
-  <block wx:elif="{{nodata}}">
-    <view class="zan-loadmore zan-loadmore--nodata">
-      <view class="zan-loadmore__tips">{{ nodata_str || '暂无数据' }}</view>
-    </view>
+  <block wx:elif="{{ type === 'text' }}">
+    <view class="zan-loadmore__line"></view>
+    <text wx:if="{{ text }}" class="zan-loadmore__text">{{ text }}</text>
+    <view wx:else class="zan-loadmore__dot"></view>
+    <view class="zan-loadmore__line"></view>
   </block>
-
-  <block wx:elif="{{loading}}">
-    <view class="zan-loadmore">
-      <view class="zan-loading"></view>
-      <view class="zan-loadmore__tips">加载中...</view>
-    </view>
-  </block>
-
-</template>
+</view>
\ No newline at end of file