uniApp插件市場有很多友好的插件，今天舉一個(gè)例子

如上圖所示，實(shí)現(xiàn)上拉刷新，下來加載，右上角點(diǎn)擊彈出篩選框，只需要在插件市場搜索刷新

選擇你想要的效果(也可以下載后自己改動(dòng)效果)

點(diǎn)擊導(dǎo)入插件，會(huì)自動(dòng)打開項(xiàng)目進(jìn)行安裝，安裝好之后。引入相應(yīng)的js就可以使用了

首先引入組件

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

在定義組件

components: {

????kScrollView,

},

頁面代碼如下：

handlePullDown"

@onPullUp="handleLoadMore">

//這里面是你的list內(nèi)容，有兩個(gè)時(shí)間 分別是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里配置參數(shù)

如上圖，配置好按鈕的名字大小后，需要在頁面中添加篩選頁面

首先引入組件

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

在定義組件

components: {

? ??uniDrawer,

},

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

篩選

? ? ?//這里添加需要篩選的內(nèi)容

????重置

????確定

showDrawer需要初始值定義下，默認(rèn)為false,效果如下

以上代碼可以直接復(fù)制到項(xiàng)目中使用。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。