评论

使用WXS解决touchmove卡顿问题

使用WXS解决touchmove卡顿问题

需求描述:

1、可以在图片上写入文字。

2、可以随意拖动文字的位置,并且最终会在拖动后图片对应的位置绘制对应的文字。


开始的做法

1、通过touchmove事件,实时获取x,y轴的位置,实时setData到Data中,然后响应到页面中的输入框元素的top,left。


遇到的问题

1、过于频繁的操作移动,特别是恶意拖动的时候,会卡顿。


解决办法:使用wxs来解决,实现思路,在wxs中定义touch事件,移动时在wxs中先设置输入框的top,left位置。等touchend事件时在把top,left位置同步到页面的事件。相关代码如下

1、在页面目录下创建 页面名.wxs 的文件

2、在wxs文件中编写对应的js代码,在wxs中不能使用let,const,只能使用var定义变量名

// 元素x,y 0 位置跟 鼠标点击位置的距离
var moveX = 0, moveY = 0, x = 0, y = 0

// 开始移动文字
function touchstartByText(e, ownerInstance) {
  moveX = e.changedTouches[0].clientX - e.target.offsetLeft
  moveY = e.changedTouches[0].clientY - e.target.offsetTop
}

// 移动文字中
function touchmoveByText(e, ownerInstance) {
  // 移动图片
  x = e.changedTouches[0].clientX - moveX
  y = e.changedTouches[0].clientY - moveY
  // 控制移动样式
  e.instance.setStyle({
    left: x + 'px',
    top: y + 'px'
  })
}

// 移动位置结束
function touchendByText(e, ownerInstance) {
  if (x > 0 && y > 0) {
    // 操作的下标
    var idx = e.target.dataset.idx || 0
    // 同步页面数据
    ownerInstance.callMethod('touchendByText', {
      idx: idx,
      x: x,
      y: y
    })
  }
}

module.exports = {
  touchstartByText: touchstartByText,
  touchmoveByText: touchmoveByText,
  touchendByText: touchendByText
}


小程序页面的.js文件定义给wxs中调用的函数

// 文字输入框移动结束在页面中js中的操作
touchendByText(data) {
  // 页面中处理的具体逻辑

}


小程序页面中的相关代码

引入wxs文件到页面中
"./ImgComments.wxs" module="move" />


小程序页面中使用wxs中的事件,跟调用js不太一样的地方是需要使用{{}}扩起来,然后用引入的wxs文件定义的module的名称点击函数名。

"{{move.touchstartByText}}"
  bindtouchmove="{{move.touchmoveByText}}"
  bindtouchend="{{move.touchendByText}}"
  bindtap="selTextInput"
  bindinput="textInput"
  data-item="{{item}}"
  data-idx="{{idx}}"
  class="ipt" 
  cursor-spacing="20"
  placeholder="输入内容..."
  placeholder-style="color:{{item.c}}"
  value="{{item.content}}" 
  style="left:{{item.x}}px; top:{{item.y}}px; font-size:{{item.s}}px; color:{{item.c}};"></input>
最后一次编辑于  2020-09-02  
点赞 0
收藏
评论

3 个评论

  • 夕~🤍
    夕~🤍
    2020-11-26

    你好 如果是touchmove不停的滑动需要渲染在屏幕上的话 结果怎么在wxml上获取 ? 按这个思路是不是还是得在js里setData呀?

    2020-11-26
    赞同
    回复
  • 〆奋斗的小青年°彡
    〆奋斗的小青年°彡
    2020-09-30

    请问一下是否可以在js的点击事件中调用wxs文件中的事件??

    2020-09-30
    赞同
    回复
  • 2020-09-02

    坑爹,保存之后,有部分代码丢失了

    2020-09-02
    赞同
    回复
登录 后发表内容