关于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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
JS 对象介绍
Jan 20 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
jQuery is()函数用法3例
May 06 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP生成树的方法
2015/07/28 PHP
CI框架表单验证实例详解
2016/11/21 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
致跳远运动员广播稿
2014/02/11 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
新闻发布会策划方案
2014/06/12 职场文书
租房安全协议书
2014/08/20 职场文书
小学老师对学生的评语
2014/12/29 职场文书
2015年超市工作总结
2015/04/09 职场文书
反邪教学习心得体会
2016/01/15 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python