在app中经常会遇到 上拉加载 下拉刷新的操作
我也不明白为啥官网不写清楚
<template>
<waterfall column-count="2" column-width="auto">
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'"> //下拉刷新
<loading style="background-color: #000;">
</loading>
</refresh>
<cell v-for="num in lists" >
<text>{{num}}</text>
</cell>
<loading @loading="onrefresh" @pullingup="onpullingup" :display="refreshing ? 'show' : 'hide'"> //上拉加载更多
<div style="background-color: #0033FF; height:90px; width:750rpx;"></div>
</loading>
</waterfall>
</template>
<script>
export default {
data () {
return {
lists: ['A', 'B', 'C', 'D', 'E']
}
}
}
</script>
<style></style>
区别不大
下拉刷新 @refresh是关闭 @onpullingdown是关闭
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<loading style="background-color: #000;">
</loading>
</refresh>
上拉加载 @loading是关闭 @pullingup是关闭
<loading @loading="onrefresh" @pullingup="onpullingup" :display="refreshing ? 'show' : 'hide'"> //上拉加载更多
<div style="background-color: #0033FF; height:90px; width:750rpx;"></div>
</loading>
onpullingdown(){
this.refreshing = true
},
onrefresh(){
setTimeout(()=>{
this.refreshing = false
},1000)
},