v0.6.1+
<loading>
为 <scroller>
和 <list>
提供上拉加载功能。用法与特性与 <refresh>
类似, 是 <scroller>
和 <list>
的子组件,且只能在被 <scroller>
和 <list>
包含时才能被正确的渲染。
display {string}
:可选值为 show
或者 hide
,仅隐藏 <indicator>
,<loading>
其他子组件依然可见,loading
事件仍会被触发。支持所有通用样式。
flexbox
布局position
opacity
background-color
查看 组件通用样式
loading
:加载时被触发。<loading>
不支持 remove
,v0.9 版本会修复。
display
值为 show
或 hide
。仅隐藏 <indicator>
,<loading>
其他子组件依然可见,loading
事件仍会被触发。
如果需要 <loading>
hide 时隐藏文案并不再触发事件,有两种解决方法:
loading
事件中添加判断逻辑;remove
解决。只能通过 display
特性进行展示和隐藏,且必须成对出现,即设置 display="show"
,必须有对应的 display="hide"
。
<template> <list> <header> <div class="center"> <text style="text-align:center">I am the header</text> </div> </header> <loading onloading="onloading" display="{{loadingDisplay}}" style="width:750;flex-direction: row;justify-content: center;"> <loading-indicator style="height:160;width:160;color:#3192e1"></loading-indicator> </loading> <cell class="row" repeat="i in staffs" index="{{$index}}"> <div class="item"> <text>{{i.name}}</text> </div> </cell> </list> </template> <style> .row { width: 750; } .item { justify-content: center; border-bottom-width: 2; border-bottom-color: #c0c0c0; height: 100; padding:20; } .center { border-bottom-width: 2; border-bottom-color: #cccccc; height: 100; padding:20; background-color:#FFFFFF; justify-content: center; } </style> <script> module.exports = { data: { staffs:[], loadingDisplay: 'show', loadingText: 'pull up to load more', refreshText: 'pull down to refresh' }, created:function() { this.refreshDisplay='show' this.staffs=[{name:'inns'},{name:'connon'},{name:'baos'},{name:'anna'},{name:'dolley'},{name:'lucy'},{name:'john'}, {name:'lily'},{name:'locke'},{name:'jack'},{name:'danny'},{name:'rose'},{name:'harris'},{name:'lotus'},{name:'louis'}]; }, methods:{ onloading:function(e){ console.log('onloading...'); this.staffs.push({name:'onloading'}) } } } </script>
更多示例可查看 <list>