<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 v-if="refreshStatus < 4" :src="loadingIcon[refreshStatus]" mode="aspectFill" class="loading-icon"></image><text class="refresh-div-text">{{ refreshText[refreshStatus] }}</text>
</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
},
refreshText:{
type:Array,
default: ['下拉刷新', '释放更新', '刷新中...', '刷新成功', '刷新失败' ]
}
},
data() {
return {
atimes: 0,
firstStartY: 0,
pageDeviation: 0, //下偏移量
pageTransition: 0, //回弹过渡时间
refreshReady: false, //进入刷新准备状态
refreshing: false, // 进入刷新状态
refreshStatus: 0,
loadingIcon: [
'../../../static/x-refresh/arrow-down.png',
'../../../static/x-refresh/arrow-up.png',
'../../../static/x-refresh/loading.gif',
'../../../static/x-refresh/refresh-ok.png'
]
};
},
computed: {
pageTop(){
return uni.upx2px(this.top);
}
},
created(){
uni.getSystemInfo({
success: function(e) {
// console.log(e);
platform = e.platform;
windowHeight = e.windowHeight;
}
})
},
methods: {
pageTouchstart(e){
console.log('pageTouchstart')
if(platform === 'android'){
e.stopPropagation()
// e.preventDefault();
// perly = 30
}
touchending = false;
this.pageTransition = 0;
if(platform === 'android' && this.atimes == 1){
startY = this.firstStartY
}else {
startY = e.touches[0].pageY;
}
this.firstStartY = startY
this.atimes = 1
},
pageTouchmove(e){
if(touchending){
return;
}
moveY = (e.touches[0].pageY - startY) * 0.4;
console.log('moveY', moveY)
if(moveY >= 0){
this.pageDeviation = moveY;
// this.$emit('setEnableScroll', false);
}
let perly = 50
if(moveY >= perly && this.refreshReady === false){
this.refreshReady = true;
this.refreshStatus = 1;
if(platform === 'android'){
// this.pageTouchend();
}
}else if(moveY < perly && this.refreshReady === true){
this.refreshReady = false;
this.refreshStatus = 0;
}
if(platform === 'ios' && e.touches[0].pageY > windowHeight + 10){
this.pageTouchend();
}
},
pageTouchend(){
console.log('pageTouchendpageTouchendpageTouchend')
touchending = true;
if(moveY === 0){
return;
}
console.log('refreshReady', moveY)
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.refreshStatus = 2;
this.pageDeviation = uni.upx2px(90);
this.$emit('refresh');
},
//结束下拉刷新
endPulldownRefresh(){
this.refreshStatus = 3;
this.refreshing = false;
this.pageDeviation = uni.upx2px(0);
//this.$emit('setEnableScroll', true);
},
}
}
</script>
<style>
.mix-refresh-content{
position: relative;
padding-top: 120upx;
}
/* 下拉刷新部分 */
.mix-loading-wrapper{
position: absolute;
left: 0;
top: 0;
right: 0;
/* transform: translateY(-100%); */
height: 120upx;
flex-direction: row;
justify-content: center;
align-items: center;
/* width: 300upx; */
}
.mix-loading-icon{
width: 70upx;
height: 70upx;
/* #ifdef MP-WEIXIN */
transition: .3s;
/* #endif */
}
.mix-loading-icon.ready{
/* #ifdef MP-WEIXIN */
transform: scaleX(1.3);
/* #endif */
}
.mix-loading-icon.active{
/* #ifdef MP-WEIXIN */
animation: loading .5s ease-in infinite both alternate;
/* #endif */
}
/* #ifndef MP-WEIXIN */
@keyframes loading {
0% {
transform: translateY(-20upx) scaleX(1);
}
100% {
transform: translateY(4upx) scaleX(1.3);
}
}
/* #endif */
.loading-icon {
width: 32upx;
height: 32upx;
margin-right: 10upx;
margin-left: -40upx;
}
.refresh-div-text {
font-size: 28upx;
color: #999;
line-height: 120upx;
text-align: left;
justify-content: center;
}
</style>
- 发布:2020-06-05 12:39
- 更新:2020-09-08 10:29
- 阅读:784
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
HBuilderX类型: 正式
HBuilderX版本号: 2.7.9
手机系统: Android
手机系统版本号: Android 7.0
手机厂商: 魅族
手机机型: MEIZU S6
页面类型: nvue
打包方式: 离线
项目创建方式: HBuilderX
示例代码:
操作步骤:
传入一个list或其他组件就可以
传入一个list或其他组件就可以
预期结果:
android端成功监听到move事件,实现下拉刷新
android端成功监听到move事件,实现下拉刷新
实际结果:
在android环境下,touchmove只监听到向下拖动的相应,向上拖动则没有;touchend事件无法监听;
在ios和小程序中没有这个问题
在android环境下,touchmove只监听到向下拖动的相应,向上拖动则没有;touchend事件无法监听;
在ios和小程序中没有这个问题
[已删除] (作者)
没解决,使用条件编译了,app端直接用list
2020-08-25 09:51
嗨哆嚒
回复 [已删除]: 我重新拉取了主分支,又莫名的好了,同时还解决了突然不能热更新的问题。。希望以后不会再遇见这个bug
2020-08-25 10:19