关于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 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
js中for in的用法示例解析
Dec 25 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
Vue实现简易计算器
Feb 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新手入门学习方法
2011/05/08 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
php常用的工具开发整理
2019/09/26 PHP
Javascript 布尔型分析
2008/12/22 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
在Python 中实现图片加框和加字的方法
2019/01/26 Python
Python的高阶函数用法实例分析
2019/04/11 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Python序列化pickle模块使用详解
2020/03/05 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
售前工程师职业生涯规划
2014/03/02 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
航班延误投诉信
2015/07/02 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
导游词之潮音寺
2019/09/26 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
python 如何做一个识别率百分百的OCR
2021/05/29 Python
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android