scroller-demo with loading more data

scroller-demo.we

<template>
  <scroller class="list" append="node">

    <refresh class="refresh-view" display="{{refresh_display}}" onrefresh="onrefresh">
      <loading-indicator style="height:60;width:60" ></loading-indicator>
      <text class="refresh-arrow" style="text-align: center; color:rgb(238, 162, 54)" if="{{(refresh_display==='hide')}}">Pull To Refresh</text>
    </refresh>

    <div class="section" repeat="{{sections}}">
      <div class="header">
        <text class="header-title">{{title}}</text>
      </div>
      <div class="item" repeat="{{items}}">
        <text class="item-title">row {{id}}</text>
      </div>
    </div>

    <loading class="loading-view" display="{{loading_display}}" onloading="onloading">
      <loading-indicator style="height:60;width:60" ></loading-indicator>
    </loading>

  </scroller>
</template>

<style>
  .refresh-view {
    height: 120px;
    width: 750px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
  }

  .refresh-arrow {
    font-size: 30px;
    color: #45b5f0;
  }

  .loading-view {
    height: 80px;
    width: 750px;
    justify-content: center;
    align-items: center;
  }

  .indicator {
    height: 40px;
    width: 40px;
    color: #45b5f0;
  }

  .header {
    background-color: #45b5f0;
    padding: 20px;
    height: 88px;
    justify-content: center;
  }

  .header-title {
    color: white;
    font-weight: bold;
  }

  .item {
    justify-content: center;
    border-bottom-width: 2px;
    border-bottom-color: #c0c0c0;
    height: 100px;
    padding: 20px;
  }

  .item-title {
  }

</style>

<script>
  require('weex-components');
  module.exports = {
    methods: {
      onrefresh: function(e) {
        var self = this;
        self.refresh_display = 'show';
        setTimeout(function () {
          self.refresh_display = 'hide';
        }, 1000)
      },
      onloading: function(e) {
        var self = this;
        self.loading_display = 'show';
        setTimeout(function () {
          self.loading_display = 'hide';
          self.sections = self.sections.concat(self.moreSections)
        }, 1000)
      }
    },
    data: {
      refresh_display: 'hide',
      loading_display: 'hide',
      sections: [
        {
          title: 'Header 1',
          items: [
            {id: 1},
            {id: 2},
            {id: 3},
            {id: 4},
            {id: 5}
          ]
        },
        {
          title: 'Header 2',
          items: [
            {id: 6},
            {id: 7},
            {id: 8},
            {id: 9},
            {id: 10},
            {id: 11}
          ]
        }
      ],
      moreSections: [
        {
          title: 'Header 3',
          items: [
            {id: 12},
            {id: 13},
            {id: 14},
            {id: 15},
            {id: 16},
            {id: 17},
            {id: 18}
          ]
        },
        {
          title: 'Header 4',
          items: [
            {id: 19},
            {id: 20},
            {id: 21},
            {id: 22}
          ]
        },
        {
          title: 'Header 5',
          items: [
            {id: 23},
            {id: 24},
            {id: 25},
            {id: 26},
            {id: 27}
          ]
        },
        {
          title: 'Header 6',
          items: [
            {id: 28},
            {id: 29},
            {id: 30},
            {id: 31},
            {id: 32}
          ]
        },
      ]
    },
  }
</script>