feat(index-list): pull up load + pull down refresh (didi#158)

* feat(index-list): pull up load * test * feat(index-list): pull down refresh * test+docs: pull down refresh * optimize: use forceUpdate replace watch deep
sm0210 · Apr 17, 2018 · 5e0050f · 5e0050f
1 parent e07b734
commit 5e0050f
Show file tree

Hide file tree

Showing 11 changed files with 562 additions and 113 deletions.
diff --git a/document/components/docs/en-US/index-list.md b/document/components/docs/en-US/index-list.md
@@ -131,6 +131,98 @@
           color: #ffcd32
   ```
 
+- Pull Up Load
+
+  Beside, you could use `pullUpLoad` to enable pull-up-load, the detail config is same as the `options.pullUpLoad` of Scroll.
+
+  ```html
+  <cube-index-list
+    ref="indexList"
+    :data="data"
+    :title="title"
+    :pullUpLoad="true"
+    @select="selectItem"
+    @title-click="clickTitle"
+    @pulling-up="onPullingUp">
+  </cube-index-list>
+  ```
+  ```javascript
+  export default {
+    data() {
+      return {
+        title: 'Current City: BEIJING',
+        data: cityData.slice(0, 4)
+      }
+    },
+    methods: {
+      selectItem(item) {
+        console.log(item.name)
+      },
+      clickTitle(title) {
+        console.log(title)
+      },
+      onPullingUp() {
+        // Mock async load.
+        setTimeout(() => {
+          const length = this.data.length
+          if (length < cityData.length) {
+            // Update data.
+            this.data.push(cityData[length])
+          }
+          // Call forceUpdate after finishing data load.
+          this.$refs.indexList.forceUpdate()
+        }, 1000)
+      }
+    }
+  }
+  ```
+
+  - Pull Down Refresh
+
+  Beside, you could use `pullDownRefresh` to enable pull-down-refresh, the detail config is same as the `options.pullDownRefresh` of Scroll.
+
+  ```html
+  <cube-index-list
+    ref="indexList"
+    :data="data"
+    :title="title"
+    :pullDownRefresh="pullDownRefresh"
+    @select="selectItem"
+    @title-click="clickTitle"
+    @pulling-down="onPullingDown">
+  </cube-index-list>
+  ```
+  ```javascript
+  export default {
+    data() {
+      return {
+        title: 'Current City: BEIJING',
+        data: cityData,
+        pullDownRefresh: {
+          stop: 55
+        }
+      }
+    },
+    methods: {
+      selectItem(item) {
+        console.log(item.name)
+      },
+      clickTitle(title) {
+        console.log(title)
+      },
+      onPullingDown() {
+        // Mock async load.
+        setTimeout(() => {
+          // Update data.
+          this.data[1].items.push(...cityData[1].items)
+          // Call forceUpdate after finishing data load.
+          this.$refs.indexList.forceUpdate()
+        }, 1000)
+      }
+    }
+  }
+  ```
+
 ### Props configuration
 
 | Attribute | Description | Type | Default |
@@ -139,6 +231,8 @@
 | data | data to be displayed | Array | [] |
 | navbar | whether need navbar | Boolean | true |
 | speed | when click the navigator, the transition time of scrolling to the specific anchor (unit: ms). | number | 0 |
+| pullUpLoad<sup>1.8.0+</sup> | pull-up-load, the detail config is same as the `options.pullUpLoad` of Scroll | Boolean/Object | false |
+| pullDownRefresh<sup>1.8.0+</sup> | pull-down-refresh, the detail config is same as the `options.pullDownRefresh` of Scroll | Boolean/Object | false |
 
 - `data` sub configuration
 
@@ -157,3 +251,5 @@ Each item of `items` array must be an object that must contains the `name` attri
 | - | - | - |
 | select | triggers when clicking one of the items in IndexList | data of the item |
 | title-click | triggers when clicking title(valid only if title has been configured) | the value of title |
+| pulling-up<sup>1.8.0+</sup> | triggers when the distance of pulling up exceeds the threshold, if pullUpLoad is true | - |
+| pulling-down<sup>1.8.0+</sup> | triggers when the distance of pulling down exceeds the threshold, if pullDownRefresh is true | - |
diff --git a/document/components/docs/en-US/scroll.md b/document/components/docs/en-US/scroll.md
@@ -68,13 +68,13 @@
     },
     methods: {
       onPullingDown() {
-        // 模拟更新数据
+        // Mock async load.
         setTimeout(() => {
           if (Math.random() > 0.5) {
-            // 如果有新数据
+            // If have new data, just update the data property.
             this.items.unshift('I am new data: ' + +new Date())
           } else {
-            // 如果没有新数据
+            // If no new data, you need use the method forceUpdate to tell us the load is done.
             this.$refs.scroll.forceUpdate()
           }
         }, 1000)
@@ -113,10 +113,10 @@
     },
     methods: {
       onPullingUp() {
-        // 更新数据
+        // Mock async load.
         setTimeout(() => {
           if (Math.random() > 0.5) {
-            // 如果有新数据
+            // If have new data, just update the data property.
             let newPage = [
               'I am line ' + ++this.itemIndex,
               'I am line ' + ++this.itemIndex,
@@ -127,7 +127,7 @@
 
             this.items = this.items.concat(newPage)
           } else {
-            // 如果没有新数据
+            // If no new data, you need use the method forceUpdate to tell us the load is done.
             this.$refs.scroll.forceUpdate()
           }
         }, 1000)

diff --git a/document/components/docs/zh-CN/index-list.md b/document/components/docs/zh-CN/index-list.md
@@ -131,6 +131,98 @@
           color: #ffcd32
   ```
 
+- 上拉加载
+
+  可以通过 `pullUpLoad` 属性开启上拉加载功能，具体配置同 Scroll 组件的 `options.pullUpLoad`。
+
+  ```html
+  <cube-index-list
+    ref="indexList"
+    :data="data"
+    :title="title"
+    :pullUpLoad="true"
+    @select="selectItem"
+    @title-click="clickTitle"
+    @pulling-up="onPullingUp">
+  </cube-index-list>
+  ```
+  ```javascript
+  export default {
+    data() {
+      return {
+        title: 'Current City: BEIJING',
+        data: cityData.slice(0, 4)
+      }
+    },
+    methods: {
+      selectItem(item) {
+        console.log(item.name)
+      },
+      clickTitle(title) {
+        console.log(title)
+      },
+      onPullingUp() {
+        // Mock async load.
+        setTimeout(() => {
+          const length = this.data.length
+          if (length < cityData.length) {
+            // Update data.
+            this.data.push(cityData[length])
+          }
+          // Call forceUpdate after finishing data load.
+          this.$refs.indexList.forceUpdate()
+        }, 1000)
+      }
+    }
+  }
+  ```
+
+  - 下拉刷新
+
+  可以通过 `pullDownRefresh` 属性开启下拉刷新功能，具体配置同 Scroll 组件的 `options.pullDownRefresh`。
+
+  ```html
+  <cube-index-list
+    ref="indexList"
+    :data="data"
+    :title="title"
+    :pullDownRefresh="pullDownRefresh"
+    @select="selectItem"
+    @title-click="clickTitle"
+    @pulling-down="onPullingDown">
+  </cube-index-list>
+  ```
+  ```javascript
+  export default {
+    data() {
+      return {
+        title: 'Current City: BEIJING',
+        data: cityData,
+        pullDownRefresh: {
+          stop: 55
+        }
+      }
+    },
+    methods: {
+      selectItem(item) {
+        console.log(item.name)
+      },
+      clickTitle(title) {
+        console.log(title)
+      },
+      onPullingDown() {
+        // Mock async load.
+        setTimeout(() => {
+          // Update data.
+          this.data[1].items.push(...cityData[1].items)
+          // Call forceUpdate after finishing data load.
+          this.$refs.indexList.forceUpdate()
+        }, 1000)
+      }
+    }
+  }
+  ```
+
 ### Props 配置
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -139,6 +231,8 @@
 | data | 需要展示的数据 | Array | [] |
 | navbar | 是否需要导航栏 | Boolean | true |
 | speed | 点击导航栏索引时，滚动到相应位置的动画时间（单位：ms） | number | 0 |
+| pullUpLoad<sup>1.8.0+</sup> | 上拉加载，具体配置参考 scroll 组件的 `options.pullUpLoad` | Boolean/Object | false |
+| pullDownRefresh<sup>1.8.0+</sup> | 下拉刷新，具体配置参考 scroll 组件的 `options.pullDownRefresh` | Boolean/Object | false |
 
 - `data` 子配置项
 
@@ -157,3 +251,5 @@
 | - | - | - |
 | select | 点击 IndexList 的某一项后触发 | 该选项的数据 |
 | title-click | 点击 title 后触发(title 必须设置后才有效) | title属性值 |
+| pulling-up<sup>1.8.0+</sup> | 当 pullUpLoad 属性为 true 时，在上拉超过阈值时触发 | - |
+| pulling-down<sup>1.8.0+</sup> | 当 pullDownRefresh 属性为 true 时，在下拉超过阈值时触发 | - |
diff --git a/document/components/docs/zh-CN/scroll.md b/document/components/docs/zh-CN/scroll.md
@@ -83,13 +83,13 @@
     },
     methods: {
       onPullingDown() {
-        // 模拟更新数据
+        // Mock async load.
         setTimeout(() => {
           if (Math.random() > 0.5) {
-            // 如果有新数据
+            // If have new data, just update the data property.
             this.items.unshift('I am new data: ' + +new Date())
           } else {
-            // 如果没有新数据
+            // If no new data, you need use the method forceUpdate to tell us the load is done.
             this.$refs.scroll.forceUpdate()
           }
         }, 1000)
@@ -130,10 +130,10 @@
     },
     methods: {
       onPullingUp() {
-        // 更新数据
+        // Mock async load.
         setTimeout(() => {
           if (Math.random() > 0.5) {
-            // 如果有新数据
+            // If have new data, just update the data property.
             let newPage = [
               'I am line ' + ++this.itemIndex,
               'I am line ' + ++this.itemIndex,
@@ -144,7 +144,7 @@
 
             this.items = this.items.concat(newPage)
           } else {
-            // 如果没有新数据
+            // If no new data, you need use the method forceUpdate to tell us the load is done.
             this.$refs.scroll.forceUpdate()
           }
         }, 1000)

diff --git a/example/pages/index-list/index-list.vue → example/pages/index-list/index.vue b/example/pages/index-list/index-list.vue → example/pages/index-list/index.vue
@@ -4,6 +4,8 @@
       <cube-button-group>
         <cube-button @click="goTo('default')">Default</cube-button>
         <cube-button @click="goTo('custom')">Custom</cube-button>
+        <cube-button @click="goTo('pull-up-load')">Pull Up Load</cube-button>
+        <cube-button @click="goTo('pull-down-refresh')">Pull Down Refresh</cube-button>
       </cube-button-group>
       <cube-view></cube-view>
     </div>

diff --git a/example/pages/index-list/pull-down-refresh.vue b/example/pages/index-list/pull-down-refresh.vue
@@ -0,0 +1,70 @@
+<template>
+  <cube-page type="index-list" title="IndexList">
+    <div slot="content">
+      <div class="view-wrapper">
+        <div class="index-list-wrapper">
+          <cube-index-list
+            ref="indexList"
+            :data="data"
+            :title="title"
+            :pullDownRefresh="pullDownRefresh"
+            @select="selectItem"
+            @title-click="clickTitle"
+            @pulling-down="onPullingDown">
+          </cube-index-list>
+        </div>
+      </div>
+    </div>
+  </cube-page>
+</template>
+
+<script type="text/ecmascript-6">
+  import CubePage from '../../components/cube-page.vue'
+  import cityData from '../../data/index-list.json'
+
+  export default {
+    components: {
+      CubePage
+    },
+    data() {
+      return {
+        title: 'Current City: BEIJING',
+        data: cityData,
+        pullDownRefresh: {
+          stop: 55
+        }
+      }
+    },
+    methods: {
+      selectItem(item) {
+        console.log(item.name)
+      },
+      clickTitle(title) {
+        console.log(title)
+      },
+      onPullingDown() {
+        // Mock async load.
+        setTimeout(() => {
+          // Update data.
+          this.data[1].items.push(...cityData[1].items)
+          // Call forceUpdate after finishing data load.
+          this.$refs.indexList.forceUpdate()
+        }, 1000)
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  .view-wrapper
+    position: fixed
+    top: 54px
+    left: 0
+    bottom: 0
+    width: 100%
+    .index-list-wrapper
+      height: 98%
+      width: 94%
+      margin: 0 auto
+      overflow: hidden
+</style>