更新下拉刷新逻辑

This commit is contained in:
iizmg
2020-05-27 09:53:52 +08:00
parent 0c52d3e75c
commit da894466fa
5 changed files with 150 additions and 22 deletions
+11 -10
View File
@@ -233,7 +233,14 @@
}
},
mounted() {
{
//微信禁止下拉
this.wxStopPull();
//初始化
this.init();
},
methods: {
//微信禁止下拉
wxStopPull() {
var startY = 0;
document.addEventListener('touchstart', function (e) {
startY = Number(e.touches[0].pageY);
@@ -254,11 +261,7 @@
}
}
};
}
//初始化
this.init();
},
methods: {
},
//开始拖拽
touchStart(e) {
//下拉刷新逻辑
@@ -306,11 +309,9 @@
{
if (this.moveDistance > 70) {
this.$EventBus.$emit(glob.eventNames.globRefreshEventName);
this.moveDistance = 0;
this.moveState = 0;
} else {
this.moveDistance = 0;
}
this.moveDistance = 0;
this.moveState = 0;
}
},
//初始化
@@ -309,6 +309,12 @@
.pre-scrollable {
overflow-y: auto;
}
.loadDiv {
position: absolute;
width: 100%;
z-index: 2000;
}
</style>
<title>[(${title})]</title>
</head>
@@ -377,8 +383,6 @@
integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-toasts-js@1.1.4/dist/js/bootstrap-toasts-js.min.js"
integrity="sha256-8eA/hiFNtfHeSl0SbSynWCaqa6DeEzsLD1lxsS8JnzM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/pulltorefreshjs@0.1.20/dist/index.umd.min.js"
integrity="sha256-plfyATLvpJutooJZODIP/uMaXvn8TK229Xa2FVMP/Ks=" crossorigin="anonymous"></script>
<script type="text/javascript">
//页面加载完成
$(document).ready(function () {
@@ -430,15 +434,89 @@
});
//下拉刷新
$(function () {
PullToRefresh.init({
mainElement: 'body',
instructionsReleaseToRefresh: '<i class="fa fa-arrow-up btnTop-custom-fa" aria-hidden="true">',
instructionsRefreshing: '刷新中',
onRefresh: function () {
openLoading();
window.location.reload();
}
});
//下拉刷新
{
var moveDistance = 0;
var startY = 0;
var moveState = 0;
$('.main').on('touchstart', function () {
moveDistance = 0;
startY = 0;
$('.loadDiv').remove();
});
$('.main').on('touchmove', function (e) {
var scrollTop = document.getElementsByClassName('pre-scrollable')[0].scrollTop;
if (scrollTop > 0) {
return;
} else {
if (startY === 0) {
startY = e.targetTouches[0].clientY;
}
}
console.log(e.targetTouches[0].clientY, window.innerHeight);
var y = e.targetTouches[0].clientY > window.innerHeight ? window.innerHeight : e.targetTouches[0].clientY;
var move = y - startY;
if (move > 0) {
moveDistance = Math.pow(move, 0.8);
var loadDivDoms = document.getElementsByClassName('loadDiv');
if (loadDivDoms && loadDivDoms[0]) {
loadDivDoms[0].style.transform = "translate3d(0," + (moveDistance > 70 ? 70 : parseInt(moveDistance)) + 'px' + ",0)";
} else {
$('body').prepend(
'<div class="loadDiv">' +
' <div class="text-center">' +
' <div class="spinner-grow text-success" role="status">' +
' <span class="sr-only">Loading...</span>' +
' </div>' +
' </div>' +
'</div>'
);
}
if (moveDistance > 70) {
if (moveState === 1) return;
moveState = 1;
} else {
if (moveState === 0) return;
moveState = 0;
}
} else {
moveDistance = 0;
moveState = 0;
$('.loadDiv').remove();
}
});
$('.main').on('touchend', function () {
if (moveDistance > 70) {
$('body').trigger('pullReload');
}
moveDistance = 0;
moveState = 0;
$('.loadDiv').remove();
});
}
//微信禁止下拉
{
var startY = 0;
document.addEventListener('touchstart', function (e) {
startY = Number(e.touches[0].pageY);
});
var ele = document.querySelector('.pre-scrollable');
ele.ontouchmove = function (e) {
var scrollbarDom = document.getElementsByClassName('pre-scrollable')[0];
var point = e.touches[0];
var eleTop = scrollbarDom.scrollTop;
var eleTouchBottom = scrollbarDom.scrollHeight - scrollbarDom.offsetHeight;
if (eleTop === 0) {
if (point.clientY > startY) {
e.preventDefault();
}
} else if (eleTop === eleTouchBottom) {
if (point.clientY < startY) {
e.preventDefault()
}
}
};
}
});
//注册按钮点击事件
$('.header-right-bar-registered-div button').on('click', function () {
@@ -10,6 +10,41 @@
<div class="card">
<div class="card-body">
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
<h1 class="text-center">网站正在建设中</h1>
</div>
</div>
</div>
@@ -19,7 +54,11 @@
<script type="text/javascript">
//页面加载完成
$(document).ready(function () {
//下拉刷新
$('body').on('pullReload', function (e) {
openLoading();
window.location.reload();
});
});
</script>
</html>
@@ -36,6 +36,11 @@
<script type="text/javascript">
//页面加载完成
$(document).ready(function () {
//下拉刷新
$('body').on('pullReload', function (e) {
openLoading();
window.location.reload();
});
//注册按钮点击事件
$('.registered-btn').on('click', function () {
//跳转到注册
@@ -44,6 +44,11 @@
<script type="text/javascript">
//页面加载完成
$(document).ready(function () {
//下拉刷新
$('body').on('pullReload', function (e) {
openLoading();
window.location.reload();
});
//登陆按钮点击事件
$('.login-btn').on('click', function () {
//跳转到登陆