微信小程式中的下拉重新整理,上拉載入的功能很常見,目前我知道的有兩種可行的方法,一是scroll-view,二是整個頁面重新整理.今天說說第一種,自己造輪子,難免有些瑕疵,日後慢慢完善.
上gif:
原理: scroll-view中有監聽滑動的方法,這個跟android類似.其中用到了滑動到頂部,滑動到底部的方法.
1.下拉重新整理,在滑動到頂部時,bindscrolltoupper被呼叫,根據自己的業務邏輯請求即可.我的demo只是隨機換了個關鍵字.
2.上拉載入,在滑動到底部時,bindscrolltolower被呼叫,我這裡是頁數加一,根據自己的業務邏輯修改,然後將獲取到的集合新增到scroll-view的資料集合裡即可.
上**:
1.index.js
//獲取應用例項
var app = getapp()
page(, //載入更多旋轉動畫資料
clienty: 0,//觸控時y軸座標
}, onload: function () )
consolelog("螢幕高度: " + reswindowheight)
} })
//獲取words
wxrequest()
} www.cppcns.com
} })
}, scroll: function () ,
lower: function () ,
complete: function (res) )
} }
}) },
upper: function () );
updaterefreshiconcall(this);
var _this = this;
var i = mathrandom() //獲得0-1的隨機數
i = mathceil(i * 10) //乘以10並向上去整
var words = ['龍', '一', '萬', '千', '浩', '金', '得', '而', '可', '人'];
var word = words[i];
wxrequest()
}, 2000)
} settimeout(function () )
}, 2500)
} })
}, start: function (e) )
}, end: function (e)
thissetdata()
}, move: function (e)
})
/**
* 旋轉上拉載入圖示
*/ function updaterefreshicon() );
var timer = setinterval(function () )
}, 1000);
}2.index.wxml }
3.index.wxss
/**indexwxss**/
item-style
refresh-block
refresh-block image
demo：**位址
本文標題: 詳解微信小程式開發之下拉重新整理 上拉載入
本文位址:
微信小程式開發之 下拉重新整理，上拉載入更多
先開看一下介面 1.wx.request 獲取遠端伺服器的資料，可以理解成 ajax 2.scroll view的兩個事件 2.1 bindscrolltolower 滑到頁面底部時 2.2 bindscroll 頁面滑動時 2.3 bindscrolltoupper 滑倒頁面頂部時 然後我們看 詳...
微信小程式開發之 下拉重新整理，上拉載入更多
先開看一下介面 1.wx.request 獲取遠端伺服器的資料，可以理解成 ajax 2.scroll view的兩個事件 2.1 bindscrolltolower 滑到頁面底部時 2.2 bindscroll 頁面滑動時 2.3 bindscrolltoupper 滑倒頁面頂部時 然後我們看 詳...
小程式之下拉重新整理
1 通過scroll view實現 scroll view元件，通過scroll view自帶的觸發下拉重新整理 上拉載入事件。在ios下，可以正常觸發，但在安卓機型下，必須先上滑一段距離再下滑，才能夠觸發下拉重新整理事件，體驗不太好。2 通過 onpulldownrefresh實現 方法簡單記錄 ...