小程式自定義下拉重新整理
自定義元件：
js:
// components/test/test.js
Component({
/**
* 元件的屬性列表
*/
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.select-Component("#loadmore").stopRefresh(); //停止重新整理
},3000)
},
json:
{
"enablePullDownRefresh": false,
"usingComponents":{
"loadmore":"../../components/test/test"
}
}