关于uniApp editor微信滑动问题

 更新时间:2021年01月15日 09:56:38   作者:辛夷不改年年色  
这篇文章主要介绍了关于uniApp editor微信滑动问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

uniapp 小程序在微信下会出现类似下拉问题

解决方法是在app.vue 的页面onLaunch方法内添加禁止下滑方法

this.$nextTick(() => {
document.body.addEventListener("touchmove", this.addBodyTouchEvent, {
passive: false
});
});

问题解决后在uniApp的editor组件内无法滑动

解决方法

data内添加这两个值

添加touchstart和touchend方法手动写滑动效果

touchstart(e) {
this.previewScrollTop = e.touches[0].pageY;
},
touchend(e) {
let distance = e.changedTouches[0].pageY - this.previewScrollTop;
if (Math.abs(distance) <= 10) {
return false;
}
//距离太短时不滚动
let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0],
maxHeight = Math.max(0, dom.scrollHeight - dom.clientHeight), //最大高度范围
tempData = this.scrollTop + (distance >= 0 ? -60 : 60); //计算应该高度数据
if (tempData >= maxHeight) {
this.scrollTop = maxHeight;
dom.scrollTop = this.scrollTop;
} else if (tempData <= 0) {
this.scrollTop = 0;
dom.scrollTop = this.scrollTop;
} else {
this.scrollTop = tempData;
dom.scrollTop = this.scrollTop;
}
}

此时滑动效果出现。但是滑动出不流畅。

本想着写动画过渡效果。但是。这个滑动是用dom.scrollTop属性做的。该属性不属于css属性无法使用css过渡动画

所以写了一个js方法。

/**
* 动画垂直滚动到页面指定位置
* @param { } dom element对象
* @param { Number } currentY 当前位置
* @param { Number } targetY 目标位置
*/
export function scrollAnimation(dom, currentY, targetY) {
// 计算需要移动的距离
let needScrollTop = targetY - currentY;
let _currentY = currentY;
setTimeout(() => {
// 一次调用滑动帧数,每次调用会不一样
const dist = Math.ceil(needScrollTop / 10);
_currentY += dist;
dom.scrollTo(_currentY, currentY);
// 如果移动幅度小于十个像素,直接移动,否则递归调用,实现动画效果
if (needScrollTop > 10 || needScrollTop < -10) {
scrollAnimation(dom, _currentY, targetY);
} else {
dom.scrollTo(_currentY, targetY);
}
}, 1);
}

重新调用

touchend(e) {
let distance = e.changedTouches[0].pageY - this.previewScrollTop;
if (Math.abs(distance) <= 10) {
return false;
}
//距离太短时不滚动
let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0],
maxHeight = Math.max(0, dom.scrollHeight - dom.clientHeight), //最大高度范围
tempData = this.scrollTop + (distance >= 0 ? -60 : 60); //计算应该高度数据
if (tempData >= maxHeight) {
this.scrollTop = maxHeight;
dom.scrollTop = this.scrollTop;
} else if (tempData <= 0) {
this.scrollTop = 0;
dom.scrollTop = this.scrollTop;
} else {
this.scrollTop = tempData;
scrollAnimation(dom, 0, this.scrollTop);
}
}

备注一下:

这个问题本来打算用Transform:translateY(y)属性来写的,实际上也做了。

但是在做了之后发现

let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0];

这里选中的元素是红框下面的元素。在做偏移的时候整个元素偏移。文档没显示完全但是下方确有一大块空白。当时也没截图。记录一下自己踩得坑。

到此这篇关于关于uniApp editor微信滑动问题的文章就介绍到这了,更多相关uniApp editor微信滑动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • laravel实现中文和英语互相切换的例子

    laravel实现中文和英语互相切换的例子

    今天小编就为大家分享一篇laravel实现中文和英语互相切换的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序学习之自定义滚动弹窗

    微信小程序学习之自定义滚动弹窗

    这篇文章主要给大家介绍了关于微信小程序学习之自定义滚动弹窗的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • jquery+css3实现网页背景花瓣随机飘落特效

    jquery+css3实现网页背景花瓣随机飘落特效

    在qq空间可以自定义一些插件,装饰空间,大家通常就是复制代码到空间粘贴,会实现非常美观的效果,有的会随机飘落一些花瓣,那么这种效果用代码怎么实现的呢,下面小编给大家详解jquery实现网页背景花瓣随机飘落特效,需要的朋友可以参考下
    2015-08-08
  • JS作用域闭包、预解释和this关键字综合实例解析

    JS作用域闭包、预解释和this关键字综合实例解析

    这篇文章主要介绍了JS作用域闭包、预解释和this关键字,结合实例形式分析了javascript作用域闭包、预解释和this关键字在具体使用过程中的操作技巧与注意事项,需要的朋友可以参考下
    2016-12-12
  • js中的内部属性与delete操作符介绍

    js中的内部属性与delete操作符介绍

    这篇文章主要介绍了js中的内部属性与delete操作符的相关资料,需要的朋友可以参考下
    2015-08-08
  • JS vs TS二分法博弈对比分析

    JS vs TS二分法博弈对比分析

    这篇文章主要介绍了JS vs TS二分法博弈对比分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • Javascript快速实现浏览器系统通知

    Javascript快速实现浏览器系统通知

    这篇文章给大家介绍了Javascript快速实现浏览器系统通知的方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-08-08
  • 浅谈PDF.js使用心得

    浅谈PDF.js使用心得

    本篇文章主要介绍了浅谈PDF.js使用心得,pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持。非常具有实用价值,需要的朋友可以参考下
    2018-06-06
  • JavaScript给url网址进行encode编码的方法

    JavaScript给url网址进行encode编码的方法

    这篇文章主要介绍了JavaScript给url网址进行encode编码的方法,实例分析了javascript中encodeURIComponent函数的使用技巧,需要的朋友可以参考下
    2015-03-03
  • JS函数动态传递参数的方法分析【基于arguments对象】

    JS函数动态传递参数的方法分析【基于arguments对象】

    这篇文章主要介绍了JS函数动态传递参数的方法,结合实例形式分析了javascript通过arguments对象获取传递参数的相关操作技巧,需要的朋友可以参考下
    2019-06-06

最新评论