| <template> |
| <scroller class="list" append="tree"> |
| |
| <refresh class="refresh-view" display="{{refresh_display}}" onrefresh="onrefresh"> |
| <loading-indicator class="indicator" ></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 class="indicator" ></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 { |
| width: 750; |
| height: 100; |
| display: -ms-flex; |
| display: -webkit-flex; |
| display: flex; |
| -ms-flex-align: center; |
| -webkit-align-items: center; |
| -webkit-box-align: center; |
| align-items: center; |
| } |
| |
| .indicator { |
| height: 60; |
| width: 60; |
| color: #889967; |
| } |
| |
| .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'; |
| self.$call('modal', 'toast', { |
| 'message': 'onrefresh' |
| }); |
| this.$call('timer', 'setTimeout', function() { |
| self.refresh_display = 'hide'; |
| }, 3000); |
| }, |
| onloading: function(e) { |
| var self = this; |
| self.loading_display = 'show'; |
| self.$call('modal', 'toast', { |
| 'message': 'onloading' |
| }); |
| this.$call('timer', 'setTimeout', function() { |
| if (self.sections.length <= 6) { |
| self.sections.push(self.moreSections[self.sections.length - 2]); |
| } |
| self.loading_display = 'hide'; |
| }, 3000); |
| } |
| }, |
| 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> |