| <template> |
| <div> |
| <list class="list"> |
| <refresh class = "refresh-view" display="{{refresh_display}}" onrefresh="onrefresh"> |
| <text if="{{(refresh_display==='hide')}}"> ↓ pull to refresh </text> |
| <loading-indicator class="indicator"></loading-indicator> |
| </refresh> |
| <cell onappear="onappear" ondisappear="ondisappear" class="row" repeat="{{rows}}" index="{{$index}}"> |
| <div class="item"> |
| <text class="item-title">row {{id}}</text> |
| </div> |
| </cell> |
| <loading class="loading-view" display="{{loading_display}}" onloading="onloading"> |
| <text if="{{(loading_display==='hide')}}">↑ Loadmore </text> |
| <loading-indicator class="indicator"></loading-indicator> |
| </loading> |
| </list> |
| <text class="count">Appear items:{{appearMin}} - {{appearMax}}</text> |
| </div> |
| </template> |
| |
| <style> |
| .list { |
| height:850; |
| } |
| .count { |
| font-size: 48; |
| margin:10; |
| } |
| .indicator { |
| height: 40; |
| width: 40; |
| color:#45b5f0; |
| } |
| |
| .refresh-arrow { |
| font-size: 30px; |
| color: #45b5f0; |
| } |
| |
| .row { |
| width: 750; |
| } |
| |
| .item { |
| justify-content: center; |
| border-bottom-width: 2; |
| border-bottom-color: #c0c0c0; |
| height: 100; |
| padding:20; |
| } |
| |
| .item:active { |
| background-color: #00BFFF; |
| } |
| |
| .item-title { |
| } |
| .refresh-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; |
| } |
| .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; |
| } |
| </style> |
| |
| <script> |
| |
| module.exports = { |
| methods: { |
| onappear: function (e) { |
| var appearId = this.rows[e.target.attr.index].id; |
| nativeLog('+++++', appearId); |
| var appearIds = this.appearIds; |
| appearIds.push(appearId); |
| this.getMinAndMaxIds(appearIds); |
| }, |
| ondisappear:function (e) { |
| var disAppearId = this.rows[e.target.attr.index].id; |
| nativeLog('+++++', disAppearId); |
| var appearIds = this.appearIds; |
| var index = appearIds.indexOf(disAppearId); |
| if (index > -1) { |
| appearIds.splice(index, 1); |
| } |
| this.getMinAndMaxIds(appearIds); |
| }, |
| getMinAndMaxIds:function (appearIds) { |
| appearIds.sort(function(a, b) { |
| return a - b; |
| }); |
| this.appearIds = appearIds; |
| this.appearMax = appearIds[appearIds.length - 1]; |
| this.appearMin = appearIds[0]; |
| }, |
| 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() { |
| var self = this; |
| self.loading_display = 'show'; |
| self.$call('modal', 'toast', { |
| 'message': 'onloading' |
| }); |
| |
| this.$call('timer', 'setTimeout', function () { |
| if (self.rows.length <= 33) { |
| self.rows.push(self.moreRows[self.rows.length - 29]); |
| } |
| self.loading_display = 'hide'; |
| }, 3000); |
| }, |
| }, |
| data: { |
| refresh_display: 'hide', |
| loading_display: 'hide', |
| appearMin:1, |
| appearMax:1, |
| appearIds:[], |
| rows:[ |
| {id: 1}, |
| {id: 2}, |
| {id: 3}, |
| {id: 4}, |
| {id: 5}, |
| {id: 6}, |
| {id: 7}, |
| {id: 8}, |
| {id: 9}, |
| {id: 10}, |
| {id: 11}, |
| {id: 12}, |
| {id: 13}, |
| {id: 14}, |
| {id: 15}, |
| {id: 16}, |
| {id: 17}, |
| {id: 18}, |
| {id: 19}, |
| {id: 20}, |
| {id: 21}, |
| {id: 22}, |
| {id: 23}, |
| {id: 24}, |
| {id: 25}, |
| {id: 26}, |
| {id: 27}, |
| {id: 28}, |
| {id: 29} |
| ], |
| moreRows: [ |
| {id: 30}, |
| {id: 31}, |
| {id: 32}, |
| {id: 33} |
| ] |
| } |
| } |
| </script> |