用的是插间市场中一位大佬发布的插件,已经很久没有维护了,但是一直再用,更新到hbuderx最新版本后下拉就是失效了,本来想着看着hbuderx更新的内容去定位一下问题,然后看看自己能不能修复这个插件,但是好像没有看到更新的内容和插件关键代码有什么冲突
<template>
<!-- #ifdef H5 -->
<view
class="mix-refresh-content"
:style="{
transform: 'translateY('+ pageDeviation +'px)',
transition: pageTransition + 's',
height: 'calc(100% - ' + pageTop + 'px)',
maxHeight: 'calc(100% - ' + pageTop + 'px)'
}"
@touchstart="pageTouchstart"
@touchmove="pageTouchmove"
@touchend="pageTouchend"
>
<!-- #endif -->
<!-- #ifndef H5 -->
<view
class="mix-refresh-content"
:style="{
transform: 'translateY('+ pageDeviation +'px)',
transition: pageTransition + 's',
height: 'calc(100vh - ' + pageTop + 'px)',
maxHeight: 'calc(100vh - ' + pageTop + 'px)'
}"
@touchstart="pageTouchstart"
@touchmove="pageTouchmove"
@touchend="pageTouchend"
>
<!-- #endif -->
<!-- 下拉刷新 -->
<view class="mix-loading-wrapper">
<image
class="mix-loading-icon"
:class="{active: refreshing, ready: refreshReady}"
src="/static/refresh.png">
</image>
</view>
<slot></slot>
</view>
</template>
<script>
let startY, moveY, windowHeight = 500, platform;
let timeDiff = 0;
let touchending;
export default {
props: {
top: {
//距离顶部距离,单位upx
type: Number,
default: 0
},
},
data() {
return {
pageDeviation: 0, //下偏移量
pageTransition: 0, //回弹过渡时间
refreshReady: false, //进入刷新准备状态
refreshing: false, // 进入刷新状态
};
},
computed: {
pageTop(){
return uni.upx2px(this.top);
}
},
created(){
uni.getSystemInfo({
success: function(e) {
platform = e.platform;
windowHeight = e.windowHeight;
}
})
},
methods: {
pageTouchstart(e){
console.log('pageTouchstart--',e);
touchending = false;
this.pageTransition = 0;
startY = e.touches[0].pageY;
},
pageTouchmove(e){
console.log('pageTouchmove--',e);
if(touchending){
return;
}
moveY = (e.touches[0].pageY - startY) * 0.4;
if(moveY >= 0){
this.pageDeviation = moveY;
this.$emit('setEnableScroll', false);
}
if(moveY >= 50 && this.refreshReady === false){
this.refreshReady = true;
}else if(moveY < 50 && this.refreshReady === true){
this.refreshReady = false;
}
if(platform === 'ios' && e.touches[0].pageY > windowHeight + 10){
this.pageTouchend();
}
},
pageTouchend(){
console.log('pageTouchend');
touchending = true;
if(moveY === 0){
return;
}
this.pageTransition = 0.3;
if(moveY >= 50){
this.startPulldownRefresh();
}else{
this.pageDeviation = 0;
}
if(this.refreshReady === true){
this.refreshReady = false;
}
//修复下拉一点回弹后页面无法滚动的bug
this.$emit('setEnableScroll', true);
startY = moveY = 0;
},
//开启下拉刷新
startPulldownRefresh(){
if(+new Date() - timeDiff < 100){
return;
}
timeDiff = +new Date();
this.refreshing = true;
this.pageDeviation = uni.upx2px(90);
this.$emit('refresh');
},
//结束下拉刷新
endPulldownRefresh(){
this.refreshing = false;
this.pageDeviation = uni.upx2px(0);
//this.$emit('setEnableScroll', true);
},
}
}
</script>
<style>
.mix-refresh-content{
display: flex;
flex-direction: column;
position: relative;
}
/* 下拉刷新部分 */
.mix-loading-wrapper{
position: absolute;
left: 0;
top: 0;
transform: translateY(-100%);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.mix-loading-icon{
width: 70upx;
height: 70upx;
transition: .3s;
}
.mix-loading-icon.ready{
transform: rotate(180deg);
}
.mix-loading-icon.active{
animation: loading 1s infinite linear;
}
@keyframes loading {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(359deg)
}
}
</style>
5 个回复
最佳回复
DCloud_UNI_LXH
临时解决方案:https://ask.dcloud.net.cn/question/126610?item_id=169027&rf=false
3***@qq.com (作者)
https://ext.dcloud.net.cn/plugin?id=315 这是原插件链接
3***@qq.com (作者)
顶个
DCloud_UNI_LXH
已确定,已加分,预计下版修复
DCloud_UNI_LXH
3.2.0 alpha 已修复