您好,登錄后才能下訂單哦!
這篇文章主要介紹了小程序怎樣實(shí)現(xiàn)自定義下拉刷新,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
自定義組件:
js:
// components/test/test.js Component({ /** * 組件的屬性列表 */ properties: { }, /** * 組件的初始數(shù)據(jù) */ data: { scrollHeight: 0, startY: 0, tips: '下拉刷新', isRefreshing: false }, /** * 組件的方法列表 */ methods: { end: function(e) { if (this.data.isRefreshing) { return } if (this.data.scrollHeight >= 50) { this.setData({ scrollHeight: 50, tips: '正在刷新', isRefreshing: true }) this.triggerEvent('onRefresh') } else { this.setData({ scrollHeight: 0, tips: '下拉刷新' }) } }, move: function(e) { if (this.data.isRefreshing) { return } var that = this; var moveY = e.touches[0].pageY; var dY = moveY - that.data.startY; console.log(dY); if (dY >= 50 && dY <= 80) { this.setData({ tips: '松開加載', scrollHeight: dY }) } else if (dY > 80) { this.setData({ tips: '松開加載', scrollHeight: 80 }) } else { this.setData({ tips: '下拉刷新', scrollHeight: dY }) } }, start: function(e) { this.data.startY = e.touches[0].pageY; }, stopRefresh: function() { this.setData({ isRefreshing: false, scrollHeight: -50 }) }, } })
wxml:
<!--components/test/test.wxml--> <view class='loading-container' bindtouchend='end' bindtouchmove='move' bindtouchstart='start' style='margin-top:{{scrollHeight}}px;transform:translateY(-50px);' > <view class="weui-loadmore" style='margin:0 auto;padding:1.5em 0;'> <view class="weui-loading"></view> <view class="weui-loadmore__tips">{{tips}}</view> </view> </view>
wxss:其中引用了weui 這個(gè)用不用都無(wú)所謂的很簡(jiǎn)單的
@import '/pages/common/weui.wxss'; page{ height: 100%; } .loading-container{ height: 100%; }
pages里wxml:
<loadmore style='height:100%;' bindonRefresh='onRefresh' id='loadmore'></loadmore>
js://刷新方法回調(diào)
onRefresh: function() { var that = this; setTimeout(function(){ that.selectComponent("#loadmore").stopRefresh(); },3000) }, json: { "enablePullDownRefresh": false, "usingComponents":{ "loadmore":"../../components/test/test" } }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享小程序怎樣實(shí)現(xiàn)自定義下拉刷新內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問(wèn)題就找億速云,詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。