You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.6 KiB
92 lines
2.6 KiB
1 year ago
|
// 使用renderjs直接操作window对象,实现动态控制app和h5的bounce
|
||
|
|
// bounce: iOS橡皮筋,Android半月弧,h5浏览器下拉背景等效果 (下拉刷新时禁止)
|
||
|
|
// https://uniapp.dcloud.io/frame?id=renderjs
|
||
|
|
|
||
|
|
// 与wxs的me实例一致
|
||
|
|
var me = {}
|
||
|
|
|
||
|
|
// 初始化window对象的touch事件 (仅初始化一次)
|
||
|
|
if(window && !window.$mescrollRenderInit){
|
||
|
|
window.$mescrollRenderInit = true
|
||
|
|
|
||
|
|
|
||
|
|
window.addEventListener('touchstart', function(e){
|
||
|
|
if (me.disabled()) return;
|
||
|
|
me.startPoint = me.getPoint(e); // 记录起点
|
||
|
|
}, {passive: true})
|
||
|
|
|
||
|
|
|
||
|
|
window.addEventListener('touchmove', function(e){
|
||
|
|
if (me.disabled()) return;
|
||
|
|
if (me.getScrollTop() > 0) return; // 需在顶部下拉,才禁止bounce
|
||
|
|
|
||
|
|
var curPoint = me.getPoint(e); // 当前点
|
||
|
|
var moveY = curPoint.y - me.startPoint.y; // 和起点比,移动的距离,大于0向下拉,小于0向上拉
|
||
|
|
// 向下拉
|
||
|
|
if (moveY > 0) {
|
||
|
|
// 可下拉的条件
|
||
|
|
if (!me.isDownScrolling && !me.optDown.isLock && (!me.isUpScrolling || (me.isUpScrolling && me.isUpBoth))) {
|
||
|
|
|
||
|
|
// 只有touch在mescroll的view上面,才禁止bounce
|
||
|
|
var el = e.target;
|
||
|
|
var isMescrollTouch = false;
|
||
|
|
while (el && el.tagName && el.tagName !== 'UNI-PAGE-BODY' && el.tagName != "BODY") {
|
||
|
|
var cls = el.classList;
|
||
|
|
if (cls && cls.contains('mescroll-render-touch')) {
|
||
|
|
isMescrollTouch = true
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
el = el.parentNode; // 继续检查其父元素
|
||
|
|
}
|
||
|
|
// 禁止bounce (不会对swiper和iOS侧滑返回造成影响)
|
||
|
|
if (isMescrollTouch && e.cancelable && !e.defaultPrevented) e.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {passive: false})
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 获取滚动条的位置 */
|
||
|
|
me.getScrollTop = function() {
|
||
|
|
return me.scrollTop || 0
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 是否禁用下拉刷新 */
|
||
|
|
me.disabled = function(){
|
||
|
|
return !me.optDown || !me.optDown.use || me.optDown.native
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 根据点击滑动事件获取第一个手指的坐标 */
|
||
|
|
me.getPoint = function(e) {
|
||
|
|
if (!e) {
|
||
|
|
return {x: 0,y: 0}
|
||
|
|
}
|
||
|
|
if (e.touches && e.touches[0]) {
|
||
|
|
return {x: e.touches[0].pageX,y: e.touches[0].pageY}
|
||
|
|
} else if (e.changedTouches && e.changedTouches[0]) {
|
||
|
|
return {x: e.changedTouches[0].pageX,y: e.changedTouches[0].pageY}
|
||
|
|
} else {
|
||
|
|
return {x: e.clientX,y: e.clientY}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 监听逻辑层数据的变化 (实时更新数据)
|
||
|
|
*/
|
||
|
|
function propObserver(wxsProp) {
|
||
|
|
me.optDown = wxsProp.optDown
|
||
|
|
me.scrollTop = wxsProp.scrollTop
|
||
|
|
me.isDownScrolling = wxsProp.isDownScrolling
|
||
|
|
me.isUpScrolling = wxsProp.isUpScrolling
|
||
|
|
me.isUpBoth = wxsProp.isUpBoth
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 导出模块 */
|
||
|
|
const renderBiz = {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
propObserver: propObserver,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default renderBiz;
|