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

因為專案裡面，經常會用到此功能，所以我們封裝乙個外掛程式。裡面應用到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

}

樣式：

="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)
}}

,"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...