• 售前

  • 售后

热门帖子
入门百科

关于uniApp editor微信滑动题目

[复制链接]
想不到918 显示全部楼层 发表于 2021-10-25 19:08:53 |阅读模式 打印 上一主题 下一主题
uniapp 小步伐在微信下会出现类似下拉题目

解决方法是在app.vue 的页面onLaunch方法内添加克制下滑方法
  1. this.$nextTick(() => {
  2. document.body.addEventListener("touchmove", this.addBodyTouchEvent, {
  3. passive: false
  4. });
  5. });
复制代码
题目解决后在uniApp的editor组件内无法滑动

解决方法

data内添加这两个值

添加touchstart和touchend方法手动写滑动效果
  1. touchstart(e) {
  2. this.previewScrollTop = e.touches[0].pageY;
  3. },
  4. touchend(e) {
  5. let distance = e.changedTouches[0].pageY - this.previewScrollTop;
  6. if (Math.abs(distance) <= 10) {
  7. return false;
  8. }
  9. //距离太短时不滚动
  10. let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0],
  11. maxHeight = Math.max(0, dom.scrollHeight - dom.clientHeight), //最大高度范围
  12. tempData = this.scrollTop + (distance >= 0 ? -60 : 60); //计算应该高度数据
  13. if (tempData >= maxHeight) {
  14. this.scrollTop = maxHeight;
  15. dom.scrollTop = this.scrollTop;
  16. } else if (tempData <= 0) {
  17. this.scrollTop = 0;
  18. dom.scrollTop = this.scrollTop;
  19. } else {
  20. this.scrollTop = tempData;
  21. dom.scrollTop = this.scrollTop;
  22. }
  23. }
复制代码
此时滑动效果出现。但是滑动出不流畅。
本想着写动画过渡效果。但是。这个滑动是用dom.scrollTop属性做的。该属性不属于css属性无法使用css过渡动画
以是写了一个js方法。
  1. /**
  2. * 动画垂直滚动到页面指定位置
  3. * @param { } dom element对象
  4. * @param { Number } currentY 当前位置
  5. * @param { Number } targetY 目标位置
  6. */
  7. export function scrollAnimation(dom, currentY, targetY) {
  8. // 计算需要移动的距离
  9. let needScrollTop = targetY - currentY;
  10. let _currentY = currentY;
  11. setTimeout(() => {
  12. // 一次调用滑动帧数,每次调用会不一样
  13. const dist = Math.ceil(needScrollTop / 10);
  14. _currentY += dist;
  15. dom.scrollTo(_currentY, currentY);
  16. // 如果移动幅度小于十个像素,直接移动,否则递归调用,实现动画效果
  17. if (needScrollTop > 10 || needScrollTop < -10) {
  18. scrollAnimation(dom, _currentY, targetY);
  19. } else {
  20. dom.scrollTo(_currentY, targetY);
  21. }
  22. }, 1);
  23. }
复制代码
重新调用
  1. touchend(e) {
  2. let distance = e.changedTouches[0].pageY - this.previewScrollTop;
  3. if (Math.abs(distance) <= 10) {
  4. return false;
  5. }
  6. //距离太短时不滚动
  7. let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0],
  8. maxHeight = Math.max(0, dom.scrollHeight - dom.clientHeight), //最大高度范围
  9. tempData = this.scrollTop + (distance >= 0 ? -60 : 60); //计算应该高度数据
  10. if (tempData >= maxHeight) {
  11. this.scrollTop = maxHeight;
  12. dom.scrollTop = this.scrollTop;
  13. } else if (tempData <= 0) {
  14. this.scrollTop = 0;
  15. dom.scrollTop = this.scrollTop;
  16. } else {
  17. this.scrollTop = tempData;
  18. scrollAnimation(dom, 0, this.scrollTop);
  19. }
  20. }
复制代码
备注一下:
这个题目本来计划用Transform:translateY(y)属性来写的,实际上也做了。
但是在做了之后发现
  1. let dom = this.$refs.editor.$el.getElementsByClassName("ql-editor")[0];
复制代码

这里选中的元素是红框下面的元素。在做偏移的时间整个元素偏移。文档没表现完全但是下方确有一大块空缺。当时也没截图。记录一下自己踩得坑。
到此这篇关于关于uniApp editor微信滑动题目的文章就先容到这了,更多干系uniApp editor微信滑动内容请搜刮脚本之家从前的文章或继续欣赏下面的干系文章希望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作