微信小程式下拉重新整理和上拉載入更多

2021-10-03 23:23:55 字數 2160 閱讀 7148

因為專案裡面,經常會用到此功能,所以我們封裝乙個外掛程式。裡面應用到vant的元件

1.在compontent裡面建立乙個檔案,名字隨意

布局檔案

="message scroll-view client-pool-list" scroll-y=

"}" lower-threshold=

"1" bindtouchstart=

"touchstart" bindtouchmove=

"touchmove"

>

="pull-refresh }" id=

"pull-refresh"

>

"24px" type=

"spinner"

>

}<

/van-loading>

<

/view>

<

/slot>

<

!-- slot接受內容 --

>

="pull-refresh"

>

"}" type=

"spinner"

>

}<

/van-loading>

="size"

>

}<

/view>

<

/view>

<

/scroll-view>

樣式檔案

image

.chu

.jin

.size

.pull-refresh

json

}

2.然後在需要的檔案裡面進行應用

樣式:

="scroll-view" pull=

"}" push=

"}" listlength=

"}" bindtoload=

"toload" bindrefresh=

"refresh"

>

//····此處包裹需要下拉或上拉的布局**即可

<

/scroll-y>

邏輯**

data:

, push:

, commentlist:

,//後端返回的資料

page:1,

flag:

true

//開關 true表示可以請求資料},

//請求的資料

getmerchant

(type)

) network.

request(,

success:

(res)

=>)}

,1000

)settimeout((

)=>)}

,2000)}

else

if(type ==

"toload"))

}else)}

}else)}

else)}

}}else

if(res.data.code==2)

)}}}

)},//下拉重新整理

refresh

(e))

this

.getmerchant

(e.type)},

//上拉載入更多

toload

(e))

this

.getmerchant

(e.type)

}}

json引入

,"enablepulldownrefresh"

:false

,"backgroundtextstyle"

:"dark"

}

直接複製就可以使用,資料請求的部分,根據專案的實際情況更改即可

微信小程式 上拉重新整理和下拉載入

上拉重新整理和下拉加載有兩種方式可以實現 1.使用scroll view元件進行操作,使用自帶的scrolltoupper和scrolltolower事件可以實現。適合頁面區域性的上拉下拉。附上文件 2.使用page頁面事件處理函式 onpulldownrefresh 下拉重新整理 和 onreac...

微信小程式 下拉重新整理 上拉載入

1.下拉重新整理 小程式頁面整合了下拉功能,並提供了介面,我們只需要一些配置就可以拿到事件的 具體頁面的.json檔案 1 1 window 2.在js檔案中新增 函式 下拉重新整理 介面 onpulldownrefresh function 3.新增資料 通常情況下的下拉重新整理操作,就是把查詢條...

微信小程式無後台的下拉重新整理和上拉載入

1.上拉載入和下拉重新整理需要在json頁面中配置開啟下拉重新整理 enablepulldownrefresh true和 onreachbottomdistance 60設定頁面上拉觸底事件觸發時距頁面底部距離,單位為px。如果不設定上拉觸底的話預設是50px 2.首先先寫乙個公共方法,如下 xx...