关于uniApp editor微信滑动问题


Posted in Javascript onJanuary 15, 2021

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

关于uniApp editor微信滑动问题

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

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

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

关于uniApp editor微信滑动问题

解决方法

关于uniApp editor微信滑动问题

data内添加这两个值

关于uniApp editor微信滑动问题

添加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 editor微信滑动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
JS常见算法详解
Feb 28 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 #Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 #Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 #Javascript
js中延迟加载和预加载的具体使用
Jan 14 #Javascript
JS中箭头函数与this的写法和理解
Jan 14 #Javascript
JavaScript this关键字的深入详解
Jan 14 #Javascript
Vue实现多页签组件
Jan 14 #Vue.js
You might like
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
详解Python编程中包的概念与管理
2015/10/16 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
工作中的自我评价如何写好
2013/10/28 职场文书
个人应聘自我评价分享
2013/11/18 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
干部考察材料范文
2014/12/24 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
Nginx配置https的实现
2021/11/27 Servers