<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#app {
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
header {
width: 100%;
height: 44px;
background: teal;
z-index: 10;
transition: all 1s;
}
main {
height: calc(100% - 44px);
overflow: auto;
-webkit-overflow-scrolling: touch;
flex: 1;
}
.item {
line-height: 30px;
padding: 10px;
text-align: center;
font-size: 20px;
}
.item + .item {
border-top: 1px solid;
}
</style>
<style>
.css-icon {
display: inline-block;
height: 1em; width: 1em;
font-size: 20px;
box-sizing: border-box;
text-indent: -9999px;
vertical-align: middle;
position: relative;
}
.css-icon::before,
.css-icon::after {
content: '';
box-sizing: inherit;
position: absolute;
left: 50%; top: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.icon-upward::before {
height: .65em; width: .65em;
border-style: solid;
border-width: 2px 0 0 2px;
-ms-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.icon-upward::after {
height: .8em;
border-left: 2px solid;
top: 55%;
}
.icon-upward.active {
transform: rotate(180deg);
transition: transform .3s;
}
.pull-to-refresh-layer {
height: 60px;
margin-top: -60px;
font-size: 12px;
text-align: center;
color: #aaa;
line-height: 30px;
}
.search-wrapp{
width: 85%;
position: absolute;
transition: all 1s ease 0s;
height: 30px;
border: 1px solid #fff;
border-radius: 25px;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div id="app">
<header ref="headers" style="height: 100px;position: relative;">
<div ref="search" class="search-wrapp" style="width: 354px;top: 54px;"></div>
</header>
<main>
<div ref="container">
<div class="pull-to-refresh-layer">
<div v-show="!isShowLoading">
<i ref="icon" class="css-icon icon-upward"></i>
<p>{
{loadText}}刷新</p>
</div>
<div v-show="isShowLoading" style="padding-top: 30px;">
loading...
</div>
</div>
<div class="item" v-for="item in list" :key="item">{
{item}}</div>
</div>
</main>
</div>
<script src="vue.js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isShowLoading: false,
loadText:'下拉'
},
computed: {
list() {
return new Array(100).fill(0).map((item, index) => index)
}
},
mounted() {
this.pullRefresh(this.$refs.container, (done) => {
setTimeout(() => {
done()
}, 1000)
})
},
methods: {
pullRefresh(el, callback) {
let beginPagY = 0
let currentPos
const maxTranslateY = 150
//获取dom节点元素
const iconEl = this.$refs.icon
const headers = this.$refs.headers
const search = this.$refs.search
//监听手指按下 并记录按下的位置
el.addEventListener('touchstart', e => {
if (el.scrollTop !== 0) {
return
}
beginPagY = e.touches[0].pageY
e.preventDefault()
})
//监听手指滑动 并记录滑动时的位置以及实时计算滑动距离
el.addEventListener('touchmove', e => {
//判断是否从顶部开始滑动
if (el.scrollTop !== 0) {
return
}
const pageY = e.touches[0].pageY
const distance = currentPos = pageY - beginPagY
//滑动初始获取各节点的宽高、位置等信息
let headH = parseInt(headers.style.height)
let searchW = parseInt(search.style.width)
let searchT = parseInt(search.style.top)
//判断是否为上滑或距离是否大于最大安全距离 上滑时header高度、搜索框宽度与top随之发生变化 但都不能小于最小阈值
if (distance < 0 || distance > maxTranslateY) {
let newVal = Math.max(headH+distance,50)
let newSearchWVal = Math.max(searchW+distance,254)
let newSearchWTopVal = Math.max(searchT+distance,10)
if(distance > 100){
this.loadText = '松开手'
newVal = 100
newSearchWVal = 354
newSearchWTopVal = 54
}
search.style.width = newSearchWVal+"px"
search.style.top = newSearchWTopVal+"px"
headers.style.height =newVal+"px"
}else{
//判断是下滑 下滑时header高度、搜索框宽度与top随之发生变化 但都不能超过最大阈值
headers.style.height = Math.min(headH+distance,100)+"px"
search.style.width = Math.min(searchW+distance,354)+"px"
search.style.top = Math.min(searchT+distance,54)+"px"
}
//下拉更新刷新样式
if (distance > 60) {
iconEl.classList.add('active')
} else {
iconEl.classList.remove('active')
}
e.preventDefault()
el.style.transform = `translateY(${distance}px)`
})
//最后让刷新动画归位 完成刷新动作
let clear = () => {
this.isShowLoading = false
el.style.transform = `translateY(0)`
setTimeout(() => {
el.style.transition = ``
//进行数据请求
// api.request({
// url:'xxxx',
// data:'xxx',
// success:()=>{
// },
// fail:(err)=>{
// }
// })
}, 400)
}
//手指离开屏幕
el.addEventListener('touchend', () => {
el.style.transition = `.2s`
//判断下拉距离是否达标 如达标则让刷新动画停留在30px位置1s
if (currentPos >= 60) {
this.isShowLoading = true
el.style.transform = `translateY(40px)`
callback && callback(() => {
clear()
})
return
}
clear()
})
}
}
})
</script>
</body>
</html>