本篇文章给大家带来的内容是关于小程序实例：如何自定义下拉刷新，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
自定义组件：
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;}, 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 这个用不用都无所谓的很简单的
@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"}}
以上就是小程序实例：如何自定义下拉刷新的详细内容。