本篇文章給大家帶來的內容是關于小程序實例：如何自定義下拉刷新，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

自定義組件：

js:

// components/test/test.jsComponent({/*** 組件的屬性列表*/properties: { }, /*** 組件的初始數據*/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;}, stopRefres沈陽小程序開發
h: 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 這個用不用都無所謂的很簡單的

@import '/pages/common/weui.wxss';page{height: 100%;} .loading-container{height: 100%;}

pages里wxml：

<loadmore style='height:100%;' bindonRefresh='onRefresh' id='loadmore'></loadmore>

js://刷新方法回調

onRefresh: function() {var that = this;setTimeout(function(){that.selectComponent("#loadmore").stopRefresh();},3000)},json:{"enablePullDownRefresh": false,"usingComponents":{"loadmore":"../../components/test/test"}}

以上就是小程序實例：如何自定義下拉刷新的詳細內容，更多請關注沈陽網站建設其它相關文章！