更新记录

1.0.0（2025-07-19）

初始版本

平台兼容性

云端兼容性

uni-app x(4.25)

yzc-refresh-x-view uniappx帧动画下拉刷新

示例代码

<template>
    <view class="page">  
        <list-view
        class="listView"
        ref="listView"
        refresher-default-style="none"
        :refresher-enabled="true"
        :show-scrollbar="false"
        :refresher-triggered="refresherTriggered"
        :upper-threshold="50"
        :lower-threshold="50"
        :refresher-threshold="refresherThreshold"
        :refresher-max-drag-distance="300"
        :bounces="true"
        enable-back-to-top="true"
        @refresherrefresh="onRefresherrefresh"
        @refresherpulling="onRefresherpulling"
        @refresherrestore="onRefresherrestore"
        @refresherabort="onRefresherabort"
        @scroll=""
        >
            <list-item
            v-for="(_, index) in list" 
            :key="index"
            class="listItem"
            type=1
            >
            </list-item>
            <list-item slot="refresher" class="refresher" :style="{width: '100%', height: refresherThreshold}">
                <yzc-refresh-x-view
                  :refresherTriggered="refresherTriggered"
                  :refresherThreshold="refresherThreshold"
                  :pullingDistance="pullingDistance"
                  :resetting="resetting"
                  :refreshStateRefreshingImagePaths="refreshStateRefreshingImagePaths"
                  :refreshStateIdleImagePaths="refreshStateIdleImagePaths"
                ></yzc-refresh-x-view>
            </list-item>
        </list-view>
    </view>
</template>

<script lang="uts">
    import yzcRefreshXView from '@/uni_modules/yzc-refresh-x-view/components/yzc-refresh-x-view/yzc-refresh-x-view.uvue'
    export default {
        components: {
            yzcRefreshXView
        },
        data() {
            return {
                list: [] as string[],
                refresherTriggered: false, // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
                pullingDistance:0,
                resetting: false,
                refresherThreshold: 80,
                refreshStateIdleImagePaths: [
                    '/static/pullLoading/1.png',
                    '/static/pullLoading/2.png',
                    '/static/pullLoading/3.png',
                    '/static/pullLoading/4.png'
                ],
                refreshStateRefreshingImagePaths: [
                    '/static/pullLoading/1.png',
                    '/static/pullLoading/2.png',
                    '/static/pullLoading/3.png',
                    '/static/pullLoading/4.png'
                ],
                tempShowBgView: false
            }
        },
        methods: {
            customStopPullDownRefresh() { // 停止下拉刷新
                this.refresherTriggered = false
                this.resetting = true
            },
            onRefresherrefresh(_: UniRefresherEvent) { // 下拉刷新被触发
                this.refresherTriggered = true
                this.resetting = false
                // 模拟下拉刷新结束
                setTimeout(() => {
                    this.customStopPullDownRefresh()
                }, 3000)
            },
            onRefresherpulling(e:RefresherEvent) { // 下拉刷新控件被下拉
                if (this.resetting) {
                    this.resetting = false
                }
                this.pullingDistance = e.detail.dy
            },
            onRefresherrestore(_: UniRefresherEvent) { // 下拉刷新控件被复位
                this.pullingDistance = 0
                this.refresherTriggered = false
                this.resetting = true
            },
            onRefresherabort(_: UniRefresherEvent) { // 下拉刷新被中止
            },
            (event: UniScrollEvent) {
            }
        },
        mounted() {
            // 模拟假数据
            const list = [] as string[]
            for (var i = 0; i < 20; i++) {
                list.push(i.toString())
            }
            this.list = list
        }
    }
</script>

<style lang="scss">
.page {
    width: 100%;
    height: 100%;
    .listView {
        position: absolute;
        left: 0;
        width: 100%;
        background-color: white;
        .listItem {
            background-color: #f8f8f8;
            height: 120rpx;
            border-bottom-width: 1rpx;
            border-bottom-color: #e1e1e1;
            border-bottom-style: solid;
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
        }
    }
}
</style>