在線客服系統(tǒng)
十三年專注于網(wǎng)站建設(shè)與互聯(lián)網(wǎng)應(yīng)用開發(fā),低調(diào)、有情懷的網(wǎng)絡(luò)應(yīng)用服務(wù)商!
南昌百恒科技微信公眾號 掃一掃關(guān)注
tel-icon全國服務(wù)熱線:400-680-9298,0791-88117053
掃一掃關(guān)注百恒科技微信公眾號

如何實現(xiàn)小程序下拉刷新和上拉加載效果

百恒網(wǎng)絡(luò) 2018-12-15 15:16:18 5642
? ? ? ?在南昌小程序開發(fā)中,有時候需要有下拉刷新和上拉加載的效果。那么這該如何實現(xiàn)呢?下面我們一起來學習一下吧。

如何實現(xiàn)小程序下拉刷新和上拉加載效果

? ? ? ?1、利用"onPullDownRefresh"和"onReachBottom"方法實現(xiàn)小程序下拉刷新上拉加載
? ? ? ?在js文件里直接寫"onPullDownRefresh"和"onReachBottom"方法即可;
? ? ? ?xml
? ? ? ?scroll-view scroll-y = true?(別忘了加上<>,/在尖括號內(nèi)
? ? ? ? ? ?.........
? ? ? scroll-view(別忘了加上<>,/在尖括號內(nèi))

? ? ? ?js
? ? ? ?onPullDownRefresh: function() {
? ? ? ? ? ?// Do something when pull down.
? ? ? ? ? ? console.log('刷新');
? ? ? ?},

? ? ? ?onReachBottom: function() {
? ? ? ? ? ?// Do something when page reach bottom.
? ? ? ? ? ? console.log('circle 下一頁');
? ? ? ?},

? ? ? ?2、在scroll-view里設(shè)定bindscrolltoupper和bindscrolltolower實現(xiàn)微信小程序下拉刷新上拉加載。
? ? ? ?在scroll-view里設(shè)定bindscrolltoupper和bindscrolltolower,然后在js里寫好觸發(fā)事件后對應(yīng)的方法。[注意,使用這個模式一定要設(shè)置scroll-view的高度,100%不知道為什么設(shè)置后沒效果,建議使用100vh]

? ? ? ?xml
? ? ? ?scroll-view scroll-y = true bindscrolltolower="loadMore" bindscrolltoupper="refesh"(別忘了加上>,/在尖括號內(nèi)
? ? ? ? ? ?..........
? ? ? ?scroll-view(別忘了加上>,/在尖括號內(nèi)

? ? ? ?js
? ? ? ?onPullDownRefresh: function() {
? ? ? ? ???// Do something when pull down.
? ? ? ? ? ? console.log('刷新');
? ? ? ?},

? ? ? ?onReachBottom: function() {
? ? ? ? ? ?// Do something when page reach bottom.
? ? ? ? ? ? console.log('circle 下一頁');
? ? ? ?},

? ? ? ?關(guān)于小程序下拉刷新和上拉加載的方法就先介紹到這里,如果還有哪些不明白的地方,可隨時來電咨詢。
400-680-9298,0791-88117053
掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號

歡迎您的光顧,我們將竭誠為您服務(wù)×

售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售后服務(wù) 售后服務(wù)
 
備案專線 備案專線
 
售后服務(wù) 售后服務(wù)
 
×