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

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

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