关于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获取当前日期时间及其它操作函数
Jan 11 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
浅析vue component 组件使用
Mar 06 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
Javascript的this详解
Mar 23 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
Python入门之modf()方法的使用
2015/05/15 Python
python更改已存在excel文件的方法
2018/05/03 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python opencv实现证件照换底功能
2019/08/19 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
入党转预备思想汇报
2014/01/07 职场文书
《秋游》教学反思
2014/04/24 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
教师师德表现自我评价
2015/03/05 职场文书
大学生实习介绍信
2015/05/05 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
怒海潜将观后感
2015/06/11 职场文书
优秀志愿者感言
2015/08/01 职场文书
Python实现生活常识解答机器人
2021/06/28 Python