关于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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
JavaScript如何实现图片处理与合成
May 29 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
使用php4加速网络传输
2006/10/09 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
比较完整的微信开发php代码
2016/08/02 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
JavaScript实现消消乐的源代码
2021/01/12 Javascript
Python多线程学习资料
2012/12/19 Python
利用python代码写的12306订票代码
2015/12/20 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
航空大学应届生求职信
2013/11/10 职场文书
终止合同协议书
2014/04/17 职场文书
个人评语大全
2014/05/04 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
java中如何截取字符串最后一位
2022/07/07 Java/Android