小程序
小游戏
企业微信
微信支付
扫描小程序码分享
使用下拉刷新组件
onPullDownRefresh
下拉刷新时,顶部tab元素会随着下拉刷新而变动,于是使用position: fixed 来固定tab的位置,固定后,小程序工具上面可以成功固定,但是真机模拟时依然会发生变动。请问这个该怎么处理呢?
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
微信下拉刷新用的transform,transform会让position为fixed的后代元素相对于自己定位。目前无解。除非你自己写个下拉刷新。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
好的,多谢,只能我自己写一个了
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
微信下拉刷新用的transform,transform会让position为fixed的后代元素相对于自己定位。目前无解。除非你自己写个下拉刷新。
好的,多谢,只能我自己写一个了
console.log("scroll...");
this.data.scrolling = true;
this.data.isLower = false;
this.data.isUpper = false;
},
//上拉 滚动条 滚动到底部时触发
lower: function () {
console.log("lower...")
this.data.isLower = true;
this.data.scrolling = false;
},
//下拉 滚动条 滚动顶底部时触发
upper: function () {
console.log("upper....");
this.data.isUpper = true;
this.data.scrolling = false;
},
start: function (e) {
console.log('start ');
if (this.data.scrolling || this.data.loading) {
return;
}
var startPoint = e.touches[0]
var clientY = startPoint.clientY;
this.setData({
downY: clientY,
refreshHeight: 0,
loadMoreHeight: 0,
pull: true,
refreshing_text: '下拉刷新',
loading_text: '上拉加载更多'
});
},
end: function (e) {
this.data.scrolling = false;
if (this.data.refreshing) {
return;
}
console.log('end');
//释放开始刷新
var height = this.data.loadingHeight;
if (this.data.refreshHeight > this.data.loadingHeight) {
this.setData({
refreshHeight: height,
loading: true,
pull: false,
refreshing_text: '正在刷新...'
});
this.refresh();
this.loadFinish();
} else if (this.data.loadMoreHeight > height) {
this.setData({
loadMoreHeight: height,
loading: true,
pull: false,
loading_text: '正在加载更多...'
});
this.loadMore();
} else {
this.setData({
refreshHeight: 0,
loadMoreHeight: 0,
loading: false,
pull: true
})
}
},
//模拟刷新数据
refresh: function () {
switch (this.data.activeIndex) {
case '0': {
//消费记录请求
this.setData({
tradingListData: [],
packageCurrent: 1
});
this.getUserTradingRecordsRequest();
break;
}
case '1': {
//充值记录请求
this.setData({
payListData: [],
packageCurrent: 1
});
this.getPayRecordsRequest();
break;
}
default: {
break;
}
}
},
//模拟加载更多数据
loadMore: function () {
var self = this;
var newPage = self.data.packageCurrent;
newPage++;
self.setData({
packageCurrent: newPage
});
switch (this.data.activeIndex) {
case '0': {
//消费记录请求
this.getUserTradingRecordsRequest();
break;
}
case '1': {
//充值记录请求
this.getPayRecordsRequest();
break;
}
default: {
break;
}
}
},
loadFinish: function () {
var that = this;
setTimeout(function () {
//2s后刷新结束
that.setData({
refreshHeight: 0,
loadMoreHeight: 0,
loading: false
})
}, 1500);
},
move: function (e) {
// console.log("move...:scrolling:" + this.data.scrolling, 'loading:' + this.data.loading
// + 'isLower:' + this.data.isLower);
if (this.data.scrolling || this.data.loading) {
return;
}
var movePoint = e.changedTouches[0]
var moveY = (movePoint.clientY - this.data.downY) * 0.6;
//1.下拉刷新
if (this.data.isUpper && moveY > 0) {
console.log("下拉...dy:", moveY);
this.setData({
refreshHeight: moveY
})
if (this.data.refreshHeight > this.data.loadingHeight) {
this.setData({
pull: false,
refreshing_text: '释放立即刷新'
})
} else {
this.setData({
pull: true,
refreshing_text: '下拉刷新'
})
}
} else if (this.data.isLower && moveY < 0) {//2上拉加载更多
console.log("上拉...dy:", moveY);
this.setData({
loadMoreHeight: Math.abs(moveY)
})
if (this.data.loadMoreHeight > this.data.loadingHeight) {
this.setData({
pull: false,
loading_text: '释放加载更多'
})
} else {
this.setData({
pull: true,
refreshing_text: '上拉加载更多'
})
}
}
}