关于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微信滑动内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• uniapp小程序实现瀑布流布局的思路与代码
• uniapp微信小程序:key失效的解决方法
• uniapp H5 https跨域请求实现
• 详解uniapp的全局变量实现方式
• uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
• uniapp微信小程序实现一个页面多个倒计时
• uniapp电商小程序实现订单30分钟倒计时
• uniapp实现可滑动选项卡
• 分析uniapp如何动态获取接口域名

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！