小程序实例：如何自定义下拉刷新

本篇文章给大家带来的内容是关于小程序实例：如何自定义下拉刷新，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

自定义组件：

js:

// components/test/test.js
Component({
* 组件的属性列表
properties: {
* 组件的初始数据
data: {
scrollHeight: 0,
startY: 0,
tips: #39;下拉刷新 #39;,
isRefreshing: false
* 组件的方法列表
methods: {
end: function(e) {
if (this.data.isRefreshing) {
return
if (this.data.scrollHeight = 50) {
this.setData({
scrollHeight: 50,
tips: #39;正在刷新 #39;,
isRefreshing: true
this.triggerEvent( #39;onRefresh #39;)
} else {
this.setData({
scrollHeight: 0,
tips: #39;下拉刷新 #39;
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: #39;松开加载 #39;,
scrollHeight: dY
} else if (dY 80) {
this.setData({
tips: #39;松开加载 #39;,
scrollHeight: 80
} else {
this.setData({
tips: #39;下拉刷新 #39;,
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 >
wxss:其中引用了weui 这个用不用都无所谓的很简单的
@import #39;/pages/common/weui.wxss #39;;
page{
height: 100%;
.loading-container{
height: 100%;
}
pages里wxml：
 loadmore >
js://刷新方法回调
onRefresh: function() {
var that = this;
setTimeout(function(){
that.selectComponent( #loadmore ).stopRefresh();
},3000)
json:
 enablePullDownRefresh : false,
 usingComponents :{
 loadmore : ../../components/test/test 
}
以上就是小程序实例：如何自定义下拉刷新的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。