[new feature] add List component (#682)

packages/index.js

@@ -30,6 +30,7 @@ import GoodsActionMiniBtn from './goods-action-mini-btn';
 import Icon from './icon';
 import ImagePreview from './image-preview';
 import Lazyload from './lazyload';
+import List from './list';
 import Loading from './loading';
 import Locale from './locale';
 import NavBar from './nav-bar';
@@ -96,6 +97,7 @@ const components = [
   GoodsActionBigBtn,
   GoodsActionMiniBtn,
   Icon,
+  List,
   Loading,
   NavBar,
   NoticeBar,
@@ -173,6 +175,7 @@ export {
   Icon,
   ImagePreview,
   Lazyload,
+  List,
   Loading,
   Locale,
   NavBar,

packages/list/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="van-list">
+    <slot />
+    <div class="van-list__loading" v-show="loading">
+      <slot name="loading">
+        <loading />
+        <span class="van-list__loading-text">{{ $t('loadingTip') }}</span>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import create from '../utils/create';
+import utils from '../utils/scroll';
+import { on, off } from '../utils/event';
+
+export default create({
+  name: 'van-list',
+
+  model: {
+    prop: 'loading'
+  },
+
+  props: {
+    loading: Boolean,
+    finished: Boolean,
+    immediateCheck: {
+      type: Boolean,
+      default: true
+    },
+    offset: {
+      type: Number,
+      default: 300
+    }
+  },
+
+  mounted() {
+    this.scroller = utils.getScrollEventTarget(this.$el);
+    this.handler(true);
+
+    if (this.immediateCheck) {
+      this.$nextTick(this.onScroll);
+    }
+  },
+
+  destroyed() {
+    this.handler(false);
+  },
+
+  activated() {
+    /* istanbul ignore next */
+    this.handler(true);
+  },
+
+  deactivated() {
+    /* istanbul ignore next */
+    this.handler(false);
+  },
+
+  watch: {
+    loading() {
+      this.$nextTick(this.onScroll);
+    },
+
+    finished() {
+      this.$nextTick(this.onScroll);
+    }
+  },
+
+  methods: {
+    onScroll() {
+      if (this.loading || this.finished) {
+        return;
+      }
+
+      const el = this.$el;
+      const { scroller } = this;
+      const scrollerHeight = utils.getVisibleHeight(scroller);
+
+      /* istanbul ignore next */
+      if (!scrollerHeight) {
+        return;
+      }
+
+      const scrollTop = utils.getScrollTop(scroller);
+      const targetBottom = scrollTop + scrollerHeight;
+
+      let reachBottom = false;
+
+      /* istanbul ignore next */
+      if (el === scroller) {
+        reachBottom = scroller.scrollHeight - targetBottom < this.offset;
+      } else {
+        const elBottom =
+          utils.getElementTop(el) -
+          utils.getElementTop(scroller) +
+          utils.getVisibleHeight(el);
+        reachBottom = elBottom - scrollerHeight < this.offset;
+      }
+
+      /* istanbul ignore else */
+      if (reachBottom) {
+        this.$emit('input', true);
+        this.$emit('load');
+      }
+    },
+
+    handler(bind) {
+      /* istanbul ignore else */
+      if (this.binded !== bind) {
+        this.binded = bind;
+        (bind ? on : off)(this.scroller, 'scroll', this.onScroll);
+      }
+    }
+  }
+});
+</script>

packages/locale/lang/en-US.js

@@ -3,6 +3,7 @@ export default {
   cancel: 'Cancel',
   save: 'Save',
   complete: 'Complete',
+  loadingTip: 'Loading...',
   vanContactCard: {
     name: 'Name',
     tel: 'Phone',
@@ -31,8 +32,7 @@ export default {
   },
   vanPullRefresh: {
     pullingText: 'Pull to refresh...',
-    loosingText: 'Loose to refresh...',
-    loadingText: 'Loading...'
+    loosingText: 'Loose to refresh...'
   },
   vanSubmitBar: {
     label: 'Total：'

packages/locale/lang/zh-CN.js

@@ -3,6 +3,7 @@ export default {
   cancel: '取消',
   save: '保存',
   complete: '完成',
+  loadingTip: '加载中...',
   vanContactCard: {
     name: '联系人',
     tel: '联系电话',
@@ -34,8 +35,7 @@ export default {
   },
   vanPullRefresh: {
     pullingText: '下拉即可刷新...',
-    loosingText: '释放即可刷新...',
-    loadingText: '加载中...'
+    loosingText: '释放即可刷新...'
   },
   vanSubmitBar: {
     label: '合计：'

packages/pull-refresh/index.vue

@@ -19,7 +19,7 @@
         <slot name="loading" v-if="status === 'loading'">
           <div class="van-pull-refresh__loading">
             <loading />
-            <span>{{ loadingText || $t('loadingText') }}</span>
+            <span>{{ loadingText || $t('loadingTip') }}</span>
           </div>
         </slot>
       </div>

packages/vant-css/src/index.css

@@ -4,17 +4,18 @@
 
 /* base */
 @import './base.css';
+@import './icon.css';
+@import './loading.css';
+@import './button.css';
+@import './cell.css';
 
 /* common components */
-@import './icon.css';
 @import './col.css';
 @import './row.css';
 @import './badge.css';
-@import './button.css';
-@import './cell.css';
 @import './circle.css';
 @import './collapse.css';
-@import './loading.css';
+@import './list.css';
 @import './nav-bar.css';
 @import './notice-bar.css';
 @import './popup.css';

packages/vant-css/src/list.css

@@ -0,0 +1,25 @@
+@import './common/var.css';
+
+.van-list {
+  &__loading {
+    text-align: center;
+
+    .van-loading,
+    &-text {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .van-loading {
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+    }
+
+    &-text {
+      font-size: 13px;
+      color: $gray-dark;
+      line-height: 50px;
+    }
+  }
+}

packages/vant-css/src/pull-refresh.css

@@ -25,13 +25,13 @@
     .van-loading {
       width: 16px;
       height: 16px;
-      display: inline-block;
-      margin-right: 10px;
+      margin-right: 5px;
     }
 
     span,
     .van-loading {
       vertical-align: middle;
+      display: inline-block;
     }
   }