更新记录

1.0.0.1（2026-01-04） 下载此版本

master

1.0.0（2026-01-04） 下载此版本

master

平台兼容性

uni-app(4.13)

其他

安装

在市场导入xf-pageuni_modules版本的即可，无需import

组件关联说明

• xf-scss辅助样式;

• xf-ts辅助样式;

• xf-empty;

• xf-loading;

• xf-list-more;

• xf-dialog;

• z-paging;

• 另外非常感谢z-paging大佬， xf-page的下拉刷新是基于z-paging开发的，在开发中避免了不少坑，该组件使用简单低耦合，基本可以解决开发中的下拉刷新、上拉加载问题；

代码演示

基本用法

• 基础页面使用组件代码如下：

<template>
    <view class="main-page">
        <xf-page ref="xfPageRef" :apiFn="request" :canRefresh="true" :fixed="false">
            <view class="main xf-col" style="background-color: #FFF; height: 300px;" v-if="detail">
                <text>名字： {{detail.name}}</text>
                <text>年龄： {{detail.age}}</text>
            </view>
        </xf-page>
    </view>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    const detail = ref()
    //page加载回调
    const request = () => {
        return apiWeiboList().then((res : any) => {
            detail.value = res
            return res
        })
    }
    //模拟接口请求
    const apiWeiboList = () => {
        return new Promise((resolute, reject) => {
            setTimeout(function () {
                try {
                    let res = {
                        id: 1,
                        name: 'shenhl',
                        age: 20
                    };
                    //模拟接口请求成功
                    resolute(res);
                } catch (e) {
                    //模拟接口请求失败
                    reject(e);
                }

            }, 2000)
        })
    }
</script>

• 分页页面使用组件代码如下：

<template>
    <xf-page ref="xfPageRef" :apiFn="request" isUseVirtualList isPaging :canRefresh="true" :fixed="false">
        <view class="item xf-col" v-for="(item,index) in dataList" :key="index">
            <text> {{item.title}}</text>
            <text class="b-mt16"> {{item.content}}</text>
        </view>
    </xf-page>
</template>

<script lang="ts" setup>

    import { ref } from 'vue'
    const dataList = ref([])
    //page加载回调
    const request = (page :number ,pageSize:number) => {
        return apiWeiboList(page, pageSize).then((res : any) => {
            dataList.value = dataList.value.concat(res)
            return res
        })
    }
    // 获取微博列表
    const apiWeiboList = (pageNum, pageSize) => {
        return new Promise((resolute, reject)=>{
            //延时2秒,模拟联网
            setTimeout(function() {
                try {
                    let list = [];
                    if(!pageNum){
                        //此处模拟下拉刷新返回的数据
                        let id=new Date().getTime();
                        let newObj={id:id, title:"【新增微博"+id+"】 新增微博", content:"新增微博的内容,新增微博的内容"};
                        list.push(newObj);
                    }else{
                        //此处模拟上拉加载返回的数据
                        for (let i = 0; i < pageSize; i++) {
                            let upIndex=(pageNum-1)*pageSize+i+1;
                            let newObj={id:upIndex, title:"【微博"+upIndex+"】 标题标题标题标题标题标题", content:"内容内容内容内容内容内容内容内容内容内容"};
                            list.push(newObj);
                        }
                        console.log("page.num=" + pageNum + ", page.size=" + pageSize + ", curPageData.length=" + list.length);
                    }
                    //模拟接口请求成功
                    resolute(list);
                } catch (e) {
                    //模拟接口请求失败
                    reject(e);
                }
            }, 3000)
        })
    }

</script>

API

Props

事件 Emits

外部调用事件 Expose