[improvement] LoadMore: 优化组件表现及展示效果 (#337)

* fix: loadmore组件

* fix: loadmore文档完善

* fix: loadmore组件完善

* fix: loadmore MD更新

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",

example/pages/dashboard/config.js

@@ -62,6 +62,9 @@ export default {
       }, {
         name: 'Tag 标记',
         path: '/pages/tag/index'
+      }, {
+        name: 'Loadmore 加载更多',
+        path: '/pages/loadmore/index'
       }
     ]
   },

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"
+  }
+}

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>

example/pages/loadmore/index.wxss

@@ -0,0 +1,5 @@
+
+
+zan-loadmore {
+  margin: 15px;
+}

example/pages/loadmore_bak/index.json

@@ -1,3 +0,0 @@
-{
-  "navigationBarTitleText": "Loadmore 加载"
-}

example/pages/loadmore_bak/index.wxml

@@ -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>

packages/loadmore/README.md

@@ -1,26 +1,26 @@
 ## Loadmore 加载
 
 ### 使用指南
-在 app.wxss 中引入组件库所有样式
+在 index.json 中引入组件
-```css
+```json
-@import "path/to/zanui-weapp/dist/index.wxss";
+  {
+    ...
+    "usingComponents": {
+      "zan-loadmore": "../../dist/loadmore/index"
+    }
+    ...
+  }
 ```
 
-在需要使用的页面里引入组件库模板
+在页面上直接使用 zan-loadmore 标签即可
 ```html
-<import src="path/to/zanui-weapp/dist/loadmore/index.wxml" />
+  <zan-loadmore type="text"></zan-loadmore>
-
+  <zan-loadmore type="loading"></zan-loadmore>
-<!-- 直接使用 zan-loadmore 模板，并且直接传入设置值 -->
+  <zan-loadmore type="text" text="暂无数据"></zan-loadmore>
-<template is="zan-loadmore" data="{{ loading: true }}"></template>
 ```
 
-### 代码演示
+### 具体参数
-`loadmore` 支持三种状态，loading, nodata, nomore。传入指定的值即可显示
+| 名称    | 类型            | 是否必须 | 默认  | 描述              |
-```html
+| ------- | --------------- | -------- | ----- | ----------------- |
-<!-- 加载更多 -->
+| type  | String | 是       | loading | 可选`loading`, `text` |
-<template is="zan-loadmore" data="{{ loading: true }}"></template>
+| text  | String | 否       | 暂无数据 | 文案 |
-<!-- 没有可以显示的数据 -->
-<template is="zan-loadmore" data="{{ nodata: true }}"></template>
-<!-- 没有更多的数据了 -->
-<template is="zan-loadmore" data="{{ nomore: true }}"></template>
-```

packages/loadmore/index.js

@@ -0,0 +1,12 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 'loading'
+    },
+    text: {
+      type: String,
+      value: ''
+    }
+  }
+});

packages/loadmore/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

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;
+  &::after {
-  line-height: 20px;
+    @mixin hairline;
-  font-size: 14px;
+    border-bottom-width: 1px;
-  text-align: center;
+  }
+}
+
+.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;
+  height: 24px;
-  line-height: 20px;
+  line-height: 24px;
-}
-
-.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;
 }

packages/loadmore/index.wxml

@@ -1,24 +1,12 @@
-<template name="zan-loadmore">
+<view class="zan-loadmore">
-
+  <block wx:if="{{ type === 'loading' }}">
-  <block wx:if="{{nomore}}">
+    <view class="zan-loading"></view>
-    <view class="zan-loadmore zan-loadmore--nomore">
+    <view class="zan-loadmore__tips">加载中...</view>
-      <view class="zan-loadmore__tips">
-        <view class="zan-loadmore__dot"></view>
-      </view>
-    </view>
   </block>
-
+  <block wx:elif="{{ type === 'text' }}">
-  <block wx:elif="{{nodata}}">
+    <view class="zan-loadmore__line"></view>
-    <view class="zan-loadmore zan-loadmore--nodata">
+    <text wx:if="{{ text }}" class="zan-loadmore__text">{{ text }}</text>
-      <view class="zan-loadmore__tips">{{ nodata_str || '暂无数据' }}</view>
+    <view wx:else class="zan-loadmore__dot"></view>
-    </view>
+    <view class="zan-loadmore__line"></view>
   </block>
-
+</view>
-  <block wx:elif="{{loading}}">
-    <view class="zan-loadmore">
-      <view class="zan-loading"></view>
-      <view class="zan-loadmore__tips">加载中...</view>
-    </view>
-  </block>
-
-</template>