提交 a6619b5f 编写于 作者: DCloud_iOS_XHY's avatar DCloud_iOS_XHY 提交者: 雪洛

修改 custom-refresher 示例 scroll-view 换成 list-view,并添加 sticky-header ,覆盖iOS的一个Bug测试例

上级 cc83f0dd
<template> <template>
<scroll-view class="scroll-view" <list-view class="list-view" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
:refresher-enabled="true" :refresher-triggered="refresherTriggered" refresher-default-style="none" refresher-default-style="none" @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh"
@refresherpulling="onRefresherpulling" @refresherrestore="onRefreshrestore" :refresher-threshold="refresherThreshold" refresher-max-drag-distance="200px">
@refresherrefresh="onRefresherrefresh"
@refresherrestore="onRefreshrestore"
:refresher-threshold="refresherThreshold"
refresher-max-drag-distance="200px"
>
<view v-for="i in 20" class="content-item">
<text class="text">item-{{i}}</text>
</view>
<refresh-box slot="refresher" :state="state" :pullingDistance="pullingDistance"></refresh-box>
</scroll-view>
</template>
<script> <sticky-header>
import refreshBox from './refresh-box/refresh-box.uvue'; <view class="header">
export default { <text>sticky header</text>
components:{refreshBox}, </view>
data() { </sticky-header>
return { <list-item v-for="i in 20" class="content-item">
refresherTriggered:false, <text class="text">item-{{i}}</text>
refresherThreshold:40, </list-item>
pullingDistance:0, <refresh-box slot="refresher" :state="state" :pullingDistance="pullingDistance"></refresh-box>
resetting: false </list-view>
} </template>
},
computed:{ <script>
state():number{ import refreshBox from './refresh-box/refresh-box.uvue';
if (this.resetting) { export default {
return 3; components: { refreshBox },
} data() {
if(this.refresherTriggered){ return {
return 2 refresherTriggered: false,
} refresherThreshold: 40,
if(this.pullingDistance > this.refresherThreshold){ pullingDistance: 0,
return 1 resetting: false
}else{ }
return 0 },
} computed: {
} state() : number {
}, if (this.resetting) {
methods: { return 3;
onRefresherpulling(e:RefresherEvent){ }
// console.log('onRefresherpulling',e.detail.dy) if (this.refresherTriggered) {
this.pullingDistance = e.detail.dy return 2
}, }
onRefresherrefresh(){ if (this.pullingDistance > this.refresherThreshold) {
this.refresherTriggered = true return 1
setTimeout(()=>{ } else {
this.refresherTriggered = false return 0
this.resetting = true }
},1500) }
}, },
onRefreshrestore() { methods: {
this.pullingDistance = 0 onRefresherpulling(e : RefresherEvent) {
this.resetting = false; // console.log('onRefresherpulling',e.detail.dy)
this.pullingDistance = e.detail.dy
},
onRefresherrefresh() {
this.refresherTriggered = true
setTimeout(() => {
this.refresherTriggered = false
this.resetting = true
}, 1500)
},
onRefreshrestore() {
this.pullingDistance = 0
this.resetting = false;
} }
} }
} }
</script> </script>
<style> <style>
.scroll-view { .list-view {
flex: 1; flex: 1;
padding: 5px 15px; background-color: #f5f5f5;
background-color: #f5f5f5; }
}
.content-item {
padding: 15px;
margin: 5px 0;
background-color: #fff;
border-radius: 5px;
}
.text { .header {
font-size: 14px; justify-content: center;
color: #666; height: 50px;
line-height: 20px; background-color: #f5f5f5;
} padding: 15px;
}
.content-item {
padding: 15px;
margin: 5px 0;
background-color: #fff;
border-radius: 5px;
}
.text {
font-size: 14px;
color: #666;
line-height: 20px;
}
</style> </style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册