微信小程序——基於scroll-view的下拉刷新,上拉加載更多組件


scroll-y(基於scroll-view二次開發的組件)

 可豎向滾動的視圖區域,需要給scroll-y組件一個固定的高度。

 
屬性 類型 默認值 必填 說明
height String 0px scroll-y組件的固定高度(內部scroll-view視圖容器的固定高度),可傳入px/rpx。例如:height = "100px" 或者 height = "100rpx"
scroll-top Number 0 設置豎向滾動條位置
refresher-threshold Number  100 設置自定義下拉刷新閾值
refresher-background

String

#f6f6f6 自定義下拉刷新區域背景色
refresher-triggered Boolean false 下拉刷新狀態(false表示未下拉,true表示被下拉)
pull-style String circle-progress 下拉樣式,默認為circle-progress,可取值:circle-progress、diy(diy:自定義,提供 slot = "pull-animation")
refresh-style String circle 下拉后刷新樣式,默認值為circle,可取值:circle、clock、diy(diy:自定義,提供 slot = "refresh-animation")
pull-tip String 下拉刷新 下拉過程中提示字
release-tip String 釋放刷新 下拉到可釋放位置,提示文字
refresh-tip String 正在刷新中 刷新中文字提示
tip-text-color String #b2b2b2 pull-tip、release-tip、refresh-tip、load-tip 文字的顏色
load-more Boolean false 是否開啟上拉加載。默認值為false,取值:false為不開啟,true為開啟
load-style String circle 上拉加載動畫,默認為circle,可取circle、clock、diy(diy:自定義,提供 slot = "load-animation")
load-tip String 正在加載中 上拉加載文字提示,默認字體色為#b2b2b2,字體大小為11px
load-background String #f6f6f6 上拉加載背景色
bindrefresherpulling eventhandle   自定義下拉刷新控件被下拉
bindrefresherrefresh eventhandle   自定義下拉刷新被觸發
bindrefreshrestore eventhandle   自定義下拉刷新被復位
bindrefresherabort eventhandle   自定義下拉刷新被終止
bindloadmore eventhandle   上拉加載,通過 event.detail.current 可獲取當前頁

 

Tip:

  1. 自定義動畫一定結合上面屬性去完成。

  2. 刷新完成后,通過控制refresher-trigered屬性控制刷新結束。

  3. 上拉加載是有節流效果,默認在2000ms觸發一次,可通過修改scroll-y.js中的源代碼修改執行時間。

組件鏈接:scroll-y組件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM