v0.6.1+
<refresh>
为 <scroller>
和 <list>
提供下拉加载功能。用法与特性与 <loading>
类似,<scroller>
和 <list>
的子组件,且只能在被 <scroller>
和 <list>
包含时才能被正确的渲染。
display {string}
:可选值为 show
或者 hide
,仅隐藏 <indicator>
,<refresh>
其他子组件依然可见,<refresh>
事件仍会被触发。支持所有通用样式。
flexbox
布局position
opacity
background-color
查看 组件通用样式
refresh
: 当 <scroller>
/<list>
被下拉时触发。
pullingdown
v0.6.1+: 当 <scroller>
/<list>
被下拉时触发,可以从事件的参数对象中获取 dy,pullingDistance, viewHeight, type
dy: 前后两次回调滑动距离的差值 pullingDistance: 下拉的距离 viewHeight: refreshView 高度 type: "pullingdown" 常数字符串
<refresh>
不支持 remove
,v0.9 版本会修复。
display
值为 show
或 hide
。仅隐藏 <indicator>
,<refresh>
其他子组件依然可见,refresh
事件仍会被触发。
如果需要 <refresh>
hide 时隐藏文案并不再触发事件,有两种解决方法:
refresh
事件中添加判断逻辑;remove
解决。只能通过 display
特性进行展示和隐藏,且必须成对出现,即设置 display="show"
,必须有对应的 display="hide"
。
<template> <scroller class="scroller"> <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'"> <text class="indicator">Refreshing ...</text> </refresh> <div class="cell" v-for="num in lists"> <div class="panel"> <text class="text">{{num}}</text> </div> </div> </scroller> </template> <script> const modal = weex.requireModule('modal') export default { data () { return { refreshing: false, lists: [1, 2, 3, 4, 5] } }, methods: { onrefresh (event) { console.log('is refreshing') modal.toast({ message: 'refresh', duration: 1 }) this.refreshing = true setTimeout(() => { this.refreshing = false }, 2000) }, onpullingdown (event) { console.log('is onpulling down') modal.toast({ message: 'pulling down', duration: 1 }) } } } </script> <style scoped> .indicator { color: #888888; font-size: 42px; text-align: center; } .panel { width: 600px; height: 250px; margin-left: 75px; margin-top: 35px; margin-bottom: 35px; flex-direction: column; justify-content: center; border-width: 2px; border-style: solid; border-color: #DDDDDD; background-color: #F5F5F5; } .text { font-size: 50px; text-align: center; color: #41B883; } </style>
更多示例可查看 <list>