2***@qq.com
2***@qq.com
  • 发布:2023-12-11 17:16
  • 更新:2024-01-02 15:09
  • 阅读:206

list-view组件下拉刷新并不会复位

分类:uni-app x

产品分类: uni-app x/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX版本号: 3.98

手机系统: Android

手机系统版本号: Android 7.0

手机厂商: 模拟器

手机机型: VOG-AL00

示例代码:

<template>

<list-view :refresher-enabled='true'  
    :refresher-triggered='refresh'  
    @refresherrefresh='refresherrefresh'  
    @refresherrestore="list_view_refresherrestore"  
    :show-scrollbar='false'>  
    <list-item class="item"  
        v-for="(item) in list">  
        <view>{{item}}</view>  
    </list-item>  
    <sticky-header>  
        <view class="item"  
            style="background-color: pink;margin-top: 0;">固定</view>  
    </sticky-header>  
    <list-item class="item"  
        v-for="(item) in list1">  
        <view>{{item}}</view>  
    </list-item>  
    <sticky-header>  
        <view class="item"  
            style="background-color: #000;margin-top: 0;">固定</view>  
    </sticky-header>  
    <list-item class="item"  
        v-for="(item) in list1">  
        <view>{{item}}</view>  
    </list-item>  
</list-view>  

</template>

<script>
type z = boolean
type s = string
export default {
data() {
return {
refresh: false as Boolean,
title: 'Hello' as string,
list: [] as Array<any>,
list1: [] as Array<any>
}
},
onLoad() {
for (let i : number = 0; i < 5; i++) {
this.list.push(i)
// this.list.push('1')
}
for (let i : number = 0; i < 20; i++) {
this.list1.push(i)
// this.list.push('1')
}
this.title = '222'
console.log(this.getData('3'))
},
methods: {
getData(c : s) : z {
let a = c;
let b = 3;
return a == b.toString()
},
refresherrefresh() {
setTimeout(() => {
this.refresh = false
console.log('关闭', this.refresh);
}, 2000)
},
list_view_refresherrestore() {
console.log('复位');
// setTimeout(() => {
// this.refresh = false
// console.log('关闭', this.refresh);
// }, 2000)
}
}
}
</script>

<style>
.content {
width: 100%;
}

.item {  
    width: 100vw;  
    height: 100rpx;  
    background-color: red;  
    margin-top: 20rpx;  
}  

</style>

操作步骤:

直接下拉刷新

预期结果:

可取消刷新复位

实际结果:

并不会复位

bug描述:

下拉刷新并不会复位?是我代码的问题吗?

2023-12-11 17:16 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

看不出问题,可以发下代码,我试试

  • 2***@qq.com (作者)

    <template>


    <list-view :refresher-enabled='true'  
    :refresher-triggered='refresh'
    @refresherrefresh='refresherrefresh'
    @refresherrestore="list_view_refresherrestore"
    :show-scrollbar='false'>
    <list-item class="item"
    v-for="(item) in list">
    <view>{{item}}</view>
    </list-item>
    <sticky-header>
    <view class="item"
    style="background-color: pink;margin-top: 0;">固定</view>
    </sticky-header>
    <list-item class="item"
    v-for="(item) in list1">
    <view>{{item}}</view>
    </list-item>
    <sticky-header>
    <view class="item"
    style="background-color: #000;margin-top: 0;">固定</view>
    </sticky-header>
    <list-item class="item"
    v-for="(item) in list1">
    <view>{{item}}</view>
    </list-item>
    </list-view>

    </template>


    <script>

    type z = boolean

    type s = string

    export default {

    data() {

    return {

    refresh: true as Boolean,

    title: 'Hello' as string,

    list: [] as Array<any>,

    list1: [] as Array<any>

    }

    },

    onLoad() {

    for (let i : number = 0; i < 5; i++) {

    this.list.push(i)

    // this.list.push('1')

    }

    for (let i : number = 0; i < 20; i++) {

    this.list1.push(i)

    // this.list.push('1')

    }

    this.title = '222'

    console.log(this.getData('3'))

    },

    methods: {

    getData(c : s) : z {

    let a = c;

    let b = 3;

    return a == b.toString()

    },

    refresherrefresh() {

    setTimeout(() => {

    this.refresh = false

    console.log('关闭', this.refresh);

    }, 2000)

    },

    list_view_refresherrestore() {

    console.log('复位');

    // setTimeout(() => {

    // this.refresh = false

    // console.log('关闭', this.refresh);

    // }, 2000)

    }

    }

    }

    </script>


    <style>

    .content {

    width: 100%;

    }


    .item {  
    width: 100vw;
    height: 100rpx;
    background-color: red;
    margin-top: 20rpx;
    }

    </style>

    2023-12-11 17:41

8***@qq.com

8***@qq.com

refresherrefresh() {
this.refresh = true
setTimeout(() => {

this.refresh = false

console.log('关闭', this.refresh);

}, 2000)

}, refresh 要先设置成true 才会生效

要回复问题请先登录注册