<refresh>
为容器提供下拉刷新功能。
::: warning 注意
<refresh>
是 <scroller>
、<list>
、<waterfall>
的子组件,只能在被它们包含时才能被正确渲染。 :::<scroller> <refresh> <text>Refreshing...</text> </refresh> <div v-for="num in lists"> <text>{{num}}</text> </div> </scroller>
<text>
、<image>
之类的任何组件,都可以放到 <loading>
进行渲染。<loading-indicator>
: 只能作为 <refresh>
和 <loading>
的子组件使用,拥有默认的动画效果实现。<refresh> <text>Refreshing</text> <loading-indicator></loading-indicator> </refresh>
display
<refresh>
组件显示、隐藏。display
的设置必须成对出现,即设置 display="show"
,必须有对应的 display="hide"
。可选值为 show / hide
,默认值为 show
。refresh
事件:当 <scroller>
、<list>
、<waterfall>
被下拉完成时触发。pullingdown
事件:当 <scroller>
、<list>
、<waterfall>
被下拉时触发。 可以从 event
参数对象中获取以下数据:dy
: 前后两次回调滑动距离的差值pullingDistance
: 下拉的距离viewHeight
: refresh 组件高度type
: “pullingdown” 常数字符串<refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'"> <text>Refreshing ...</text> <loading-indicator></loading-indicator> </refresh>