詳解微信小程序開發(fā)之下拉刷新 上拉加載
微信小程序中的下拉刷新,上拉加載的功能很常見,目前我知道的有兩種可行的方法,一是scroll-view,二是整個(gè)頁面刷新.今天說說第一種,自己造輪子,難免有些瑕疵,日后慢慢完善.
上gif:
原理: scroll-view中有監(jiān)聽滑動(dòng)的方法,這個(gè)跟Android類似.其中用到了滑動(dòng)到頂部,滑動(dòng)到底部的方法.
1.下拉刷新,在滑動(dòng)到頂部時(shí),bindscrolltoupper被調(diào)用,根據(jù)自己的業(yè)務(wù)邏輯請(qǐng)求即可.我的demo只是隨機(jī)換了個(gè)關(guān)鍵字.
2.上拉加載,在滑動(dòng)到底部時(shí),bindscrolltolower被調(diào)用,我這里是頁數(shù)加一,根據(jù)自己的業(yè)務(wù)邏輯修改,然后將獲取到的集合添加到scroll-view的數(shù)據(jù)集合里即可.
上代碼:
1.index.js
//index.js //獲取應(yīng)用實(shí)例 var app = getApp() Page({ data: { words: [], windowHeight: 0,//獲取屏幕高度 refreshHeight: 0,//獲取高度 refreshing: false,//是否在刷新中 refreshAnimation: {}, //加載更多旋轉(zhuǎn)動(dòng)畫數(shù)據(jù) clientY: 0,//觸摸時(shí)Y軸坐標(biāo) }, onLoad: function () { var _this = this; //獲取屏幕高度 wxgetSystemInfo({ success: function (res) { _thissetData({ windowHeight: reswindowHeight }) consolelog("屏幕高度: " + reswindowHeight) } }) //獲取words wxrequest({ url: 'http://apiavatardatacn/ChengYu/Search?key=77f072d28eb141c8b6dda145ca364b92&keyWord=好', complete: function (res) { if (resdatareason == 'Succes') { _thissetData({ words: resdataresult }) } } }) }, scroll: function () { consolelog("滑動(dòng)了") }, lower: function () { var start = 0; start += 1; consolelog("加載了") var _this = this; wxrequest({ url: 'http://apiavatardatacn/ChengYu/Search', data: { key: '77f072d28eb141c8b6dda145ca364b92', keyWord: '好', page: start }, complete: function (res) { if (resdatareason == 'Succes') { var words = _thisdatawordsconcat(resdataresult); _thissetData({ words: words }) } } }) }, upper: function () { consolelog("下拉了") //獲取用戶Y軸下拉的位移 if (thisdatarefreshing) return; thissetData({ refreshing: true }); updateRefreshIconcall(this); var _this = this; var i = Mathrandom() //獲得0-1的隨機(jī)數(shù) i = Mathceil(i * 10) //乘以10并向上去整 var words = ['龍', '一', '萬', '千', '浩', '金', '得', '而', '可', '人']; var word = words[i]; wxrequest({ url: 'http://apiavatardatacn/ChengYu/Search?key=77f072d28eb141c8b6dda145ca364b92&keyWord=' + word, complete: function (res) { if (resdatareason == 'Succes') { setTimeout(function () { _thissetData({ words: resdataresult }) }, 2000) } setTimeout(function () { _thissetData({ refreshing: false }) }, 2500) } }) }, start: function (e) { var startPoint = etouches[0] var clientY = startPointclientY; thissetData({ clientY: clientY, refreshHeight: 0 }) }, end: function (e) { var endPoint = echangedTouches[0] var y = (endPointclientY - thisdataclientY) * 6; if (y > 50) { y = 50; } thissetData({ refreshHeight: y }) }, move: function (e) { consolelog("下拉滑動(dòng)了") } }) /** * 旋轉(zhuǎn)上拉加載圖標(biāo) */ function updateRefreshIcon() { var deg = 0; var _this = this; consolelog('旋轉(zhuǎn)開始了') var animation = wxcreateAnimation({ duration: 1000 }); var timer = setInterval(function () { if (!_thisdatarefreshing) clearInterval(timer); animationrotateZ(deg)step();//在Z軸旋轉(zhuǎn)一個(gè)deg角度 deg += 360; _thissetData({ refreshAnimation: animationexport() }) }, 1000); }
2.index.wxml
<!--indexwxml--> <view class="refresh-block" style="height: {{refreshHeight}}px;" wx:if="{{refreshing}}"> <image animation="{{refreshAnimation}}" src="/images/refreshpng"></image> </view> <scroll-view scroll-y="true" style="height: {{windowHeight}}px;" bindscroll="scroll" bindscrolltolower="lower" bindscrolltoupper="upper" catchtouchmove="move" catchtouchstart="start" catchtouchend="end" > <block wx:for="{{words}}"> <view class="item-style">{{itemname}}</view> </block> </scroll-view>
3.index.wxss
/**indexwxss**/ item-style{ padding: 30rpx; font-size: 40rpx; text-align: center; border-top: 2rpx solid #eee; } refresh-block { padding: 15px; text-align: center } refresh-block image { width: 30px; height: 30px; }
demo:下載地址
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js arguments,jcallee caller用法總結(jié)
這篇文章主要介紹了js中arguments, jcallee caller用法。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11利用Promise自定義一個(gè)GET請(qǐng)求的函數(shù)示例代碼
這篇文章主要給大家介紹了關(guān)于如何利用Promise自定義一個(gè)GET請(qǐng)求的函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Promise具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03封裝了一個(gè)自動(dòng)生成漸變字的JS類(clip)
之前做過一個(gè)生成漸變字體的簡單演示今天閑著沒事就把這個(gè)功能完善了,把JS代碼封裝成一個(gè)類,載入頁面就可以使相應(yīng)的HTML元素內(nèi)部的字體產(chǎn)生漸變色。2008-11-11JS小知識(shí)之如何將CSV轉(zhuǎn)換為JSON字符串
CSV文件一般是以逗號(hào)為分隔值的文件(Comma-Separated?Values,CSV,有時(shí)也稱為字符分隔值,因?yàn)榉指糇址部梢圆皇嵌禾?hào)),其文件以純文本形式存儲(chǔ)表格數(shù)據(jù)(數(shù)字和文本),下面這篇文章主要給大家介紹了JS小知識(shí)之如何將CSV轉(zhuǎn)換為JSON字符串的相關(guān)資料,需要的朋友可以參考下2023-06-06javascript 冒泡排序 正序和倒序?qū)崿F(xiàn)代碼
javascript 冒泡排序 正序和倒序?qū)崿F(xiàn)代碼,需要的朋友可以參考下。2010-12-12