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,效果如下

以上代碼可以直接復制到項目中使用。

總結

以上是生活随笔為你收集整理的uniapp弹出框_uniApp上拉刷新，下拉加载，以及筛选功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。