uniApp插件市场有很多友好的插件，今天举一个例子

如上图所示，实现上拉刷新，下来加载，右上角点击弹出筛选框，只需要在插件市场搜索刷新

选择你想要的效果(也可以下载后自己改动效果)

点击导入插件，会自动打开项目进行安装，安装好之后。引入相应的js就可以使用了

首先引入组件

import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue';

在定义组件

components: {

    kScrollView,

},

页面代码如下：

handlePullDown"

@onPullUp="handleLoadMore">

//这里面是你的list内容，有两个时间 分别是handlePullDown(下拉刷新)和handleLoadMore(下拉加载)

事件如下：

handlePullDown(stopLoad) {

    this.selectForm.pageNum = 1

    this.list = []

    this.getListsx()

    stopLoad ? stopLoad() : '';

},

handleLoadMore(stopLoad) {

    if (this.total > this.list.length) {

        this.selectForm.pageNum++

        this.getListsx()

        stopLoad ? stopLoad() : '';

    } else {

        stopLoad ? stopLoad({

        isEnd: true

    }) : '';

    }

},

到这里下拉刷新，上拉加载就完成了，

下面来做筛选功能，筛选需要在pages.json里配置参数

如上图，配置好按钮的名字大小后，需要在页面中添加筛选页面

首先引入组件

import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'

在定义组件

components: {

    uniDrawer,

},

showDrawer" mode="right" @close="showDrawer=false">

筛选

     //这里添加需要筛选的内容

    重置

    确定

showDrawer需要初始值定义下，默认为false,效果如下

以上代码可以直接复制到项目中使用。