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