前言
因为微信公众号第三方网页的项目中有下拉刷新的需求，第一反应就是试试使用H5自己写一个，网上搜了一下确实很多前辈都写过，所以直接参考；结果使用到项目中，问题频出：
- 问题1：android端微信网页有个下拉查看浏览器信息和网页信息的功能，我们加入的下拉刷新与之冲突，导致功能无法实现。
- 问题2：下拉刷新与页面滚动冲突。
- 问题3：无论在android还是ios，手势的向下滑动和左右滑动交替，导致左右滑动时触发了下拉刷新。
以下是使用的前辈代码：
实现原理
实现下拉刷新主要分为三步：
- 监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY；
- 监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值；
- 监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置。
<main> <p class="refreshText"></p> <ul id="refreshContainer"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> ... </ul> </main>(function(window) { var _element = document.getElementById('refreshContainer'), _refreshText = document.querySelector('.refreshText'), _startPos = 0, _transitionHeight = 0; _element.addEventListener('touchstart', function(e) { console.log('初始位置：', e.touches[0].pageY); _startPos = e.touches[0].pageY; _element.style.position = 'relative'; _element.style.transition = 'transform 0s'; }, false); _element.addEventListener('touchmove', function(e) { console.log('当前位置：', e.touches[0].pageY); _transitionHeight = e.touches[0].pageY - _startPos; if (_transitionHeight > 0 && _transitionHeight < 60) { _refreshText.innerText = '下拉刷新'; _element.style.transform = 'translateY('+_transitionHeight+'px)'; if (_transitionHeight > 55) { _refreshText.innerText = '释放更新'; } } }, false); _element.addEventListener('touchend', function(e) { _element.style.transition = 'transform 0.5s ease 1s'; _element.style.transform = 'translateY(0px)'; _refreshText.innerText = '更新中...'; // todo... }, false); })(window);
我开始解决以上三个问题，
问题1：android端微信网页有个下拉查看浏览器信息和网页信息的功能，我们加入的下拉刷新与之冲突，导致功能无法实现
- 既然与微信自带的下拉刷新冲突，我的思路就是取消下拉事件的默认动作，阻止事件向外传播，自然想到了preventDefault()；我高兴地在 id="refreshContainer"元素的touchstart事件、touchmove事件、touchend事件的执行函数中都加入了e.preventDefault()；这样的确生效了，解决了问题1；
- 不幸的是，又引入了新的问题，在下拉刷新内容块内的click事件失效了；把刚刚加入的e.preventDefault()注释掉，click事件是正常的；基本能确定两者冲突；思来想去，touchstart、touchend不就是一个完整的click嘛？那就把他们两个的e.preventDefault()注释掉；果然我的猜想是对的，click生效了，至此，问题1圆满解决；
问题2：下拉刷新与页面滚动冲突
- 首先由于解决问题1，touchmove事件引入e.preventDefault()，导致touchmove取消默认动作，也就是滚动区域无法滚动，我的思路是将e.preventDefault()提升到其父元素 id="myPage"处理。监听滚动条的位置，如果位于滚动元素顶部，并且向下滑动时，触发下拉刷新，并且取消事件的默认动作；如果不是位于顶部，自然不触发下拉刷新。
注：RefreshContainer-scroll是我为页面滚动元素命名的id。
<div id="myPage">
<p className="refreshText" hidden={hide}>{text}</p>
<div id="refreshContainer">
{this.props.children}
</div>
</div>
wrapBoxHandle = () => { // 兼容Android，解决下拉触发微信网页的下拉。
let that = this;
let _element = document.getElementById('myPage'),
_startPos = 0,
_transitionHeight = 0;
_element.addEventListener('touchstart', function (e) {
_startPos = e.touches[0].pageY;
}, false);
_element.addEventListener('touchmove', function (e) {
_transitionHeight = e.touches[0].pageY - _startPos;
if (that.getScrollTop() === 0 && _transitionHeight > 0) { // 位于滚动元素顶部并且向下滑动时
e.preventDefault(); // 取消事件的默认动作。可屏蔽android端微信网页自带的拉下动作。
}
}, false);
}
getScrollTop = () => { // 解决下拉刷新与页面滚动的冲突；获取当前页滚动元素的滚动条位置，保证在滚动条位于顶部时才会
//执行下拉刷新
return document.getElementById('RefreshContainer-scroll').scrollTop;
}
_element.addEventListener('touchmove', function (e) {
if (that.state.transitionWidth === 0) { // 阻止其频繁变动，保证能进入【下拉刷新】就能继续【释放更新】
_transitionWidth = Math.abs(e.touches[0].pageX - _startX); // 防止横向滑动
}
_transitionHeight = e.touches[0].pageY - _startPos;
if (that.getScrollTop() === 0 && _transitionWidth < 10
&& _transitionHeight > 0 && _transitionHeight < 60) {
that.setState({
hide: false,
text: '下拉刷新',
transitionWidth: _transitionWidth // 保证能进入【下拉刷新】就能继续【释放更新】
});
if (_transitionHeight > 30) {
_element.style.transform = `translateY(30px)`;
that.setState({
text: '释放更新',
flage: true,
transitionWidth: 0 // 一个流程走完，重置
});
}
}
}, false);
问题3：无论在android还是ios，手势的向下滑动和左右滑动交替，导致左右滑动时触发了下拉刷新
- 我的思路是监听左右滑动的幅度，判断是左右滑动还是上下滑动，在touchmove中给变量赋值
_transitionWidth = Math.abs(e.touches[0].pageX - _startX);
如果 _transitionWidth < 10则我认为是在下滑（这个值自己定的，你想定20也没问题，就是判定一个幅度），否则就是左右滑动，左右滑动的话我就不触发下拉刷新的动作。
完整代码如下：
import * as React from "react";
import './index.less';
interface Props {
reload: Function
}
export default class RefreshContainer extends React.PureComponent<Props, any> {
constructor(props) {
super(props);
this.state = {
hide: true, // 提示元素隐藏
text: '', // 提示信息
flage: false, // 执行刷新函数标志位
transitionWidth: 0 // 保证能进入【下拉刷新】就能继续【释放更新】的变量
}
}
componentDidMount = () => {
this.wrapBoxHandle();
this.refresh();
}
refresh = () => { // 下拉刷新功能函数
let that = this;
let _element = document.getElementById('refreshContainer'),
_startPos = 0,
_startX = 0,
_transitionWidth = 0,
_transitionHeight = 0;
_element.addEventListener('touchstart', function (e) {
_startPos = e.touches[0].pageY;
_startX = e.touches[0].pageX;
_element.style.position = 'relative';
_element.style.transition = 'transform 0s';
that.setState({
flage: false
});
}, false);
_element.addEventListener('touchmove', function (e) {
if (that.state.transitionWidth === 0) { // 阻止其频繁变动，保证能进入【下拉刷新】就能继续【释放更新】
_transitionWidth = Math.abs(e.touches[0].pageX - _startX); // 防止横向滑动
}
_transitionHeight = e.touches[0].pageY - _startPos;
if (that.getScrollTop() === 0 && _transitionWidth < 10
&& _transitionHeight > 0 && _transitionHeight < 60) {
that.setState({
hide: false,
text: '下拉刷新',
transitionWidth: _transitionWidth // 保证能进入【下拉刷新】就能继续【释放更新】
});
if (_transitionHeight > 30) {
_element.style.transform = `translateY(30px)`;
that.setState({
text: '释放更新',
flage: true,
transitionWidth: 0 // 一个流程走完，重置
});
}
}
}, false);
_element.addEventListener('touchend', function (e) {
_element.style.transition = 'transform 0.5s';
_element.style.transform = 'translateY(0px)';
if (that.state.flage) { // 标志下滑的值达到刷新，就执行刷新函数
that.setState({
text: '正在刷新...'
});
that.props.reload().then(() => {
that.setState({
hide: true
});
});
} else {
that.setState({
hide: true
});
}
}, false);
}
wrapBoxHandle = () => { // 兼容Android，解决下拉触发微信网页的下拉。
let that = this;
let _element = document.getElementById('myPage'),
_startPos = 0,
_transitionHeight = 0;
_element.addEventListener('touchstart', function (e) {
_startPos = e.touches[0].pageY;
}, false);
_element.addEventListener('touchmove', function (e) {
_transitionHeight = e.touches[0].pageY - _startPos;
if (that.getScrollTop() === 0 && _transitionHeight > 0) { // 位于滚动元素顶部并且向下滑动时
e.preventDefault(); // 取消事件的默认动作。可屏蔽android端微信网页自带的拉下动作。
}
}, false);
}
getScrollTop = () => { // 解决下拉刷新与页面滚动的冲突；获取当前页滚动元素的滚动条位置，保证在滚动条位于顶部时才会执行下拉刷新
return document.getElementById('RefreshContainer-scroll').scrollTop;
}
render() {
const { text, hide } = this.state;
return (
<div id="myPage">
<p className="refreshText" hidden={hide}>{text}</p>
<div id="refreshContainer">
{this.props.children}
</div>
</div>
)
}
}
