0
收藏
评论

利用wxs文件实现touch事件拖动

个人开发路上的一次填坑,就是图片拖动旋转放大缩小这些功能,用到touch事件相关的处理方法


图一:wxml文件中的touch事件绑定在js文件中,js文件中的对应的事件做出处理,然后修改x,y等相关的位置信息,并且渲染出来,问题在于:卡顿,原因:比如说js文件和wxml文件之间时通过一条管道进行通信的,那么在wxml文件触发touch事件时,开始向js文件传递数据,js接受到数据后进行处理,然后再传相关数据给wxml文件,这样一次touch事件就在这条管道中进行了两次传输,而touchmove事件的触发过于频繁,导致了管道堵塞,(塞车)。所以卡顿了

图二:通过微信给出的相关api,把wxml文件中的touch事件绑定到wxs文件中,然后再wxs文件中做出相应的修改,(修改样式),文档链接 这样做可以解决卡顿的问题,但是有个问题是,再wxs文件中修改的样式等级是最高的,也就是说通过wxs文件修改样式后,其他途径修改样式就行不通了,如果不实际情况允许的话,用这种方法做也是可以的。

图三:图三是把js,wxml,wxs三个文件形成一个圆环,wxml触发touch事件,把事件传递给wxs文件,wxs文件做相关处理,然后把结果传给js文件,js文件接收到数据后,再对wxml文件做相关的样式修改(通常都是修改x,y等值),这样既可以避免图一的卡顿,也可以避开图二的样式等级的问题,如果再在wxs文件中做相关节流的话,效果应该会更好,相关的操作,用到的api请点击这里 开发文档里面都有,就不11说明了

另外对于movable-view,我就不说, 一开始就是用的movable-view,问题多多,最后改用了图三的做法
第一次写文章,有问题的地方请多指教,纯属分享个人开发经验

最后一次编辑于  07-31  (未经腾讯允许,不得转载)
复制链接赞 0收藏投诉评论

15 个评论

  • 希望熊🐻
    希望熊🐻
    07-31

    效果呢?

    07-31
    赞同
    回复 1
    • 就在那里
      就在那里
      07-31
      请看下图
      07-31
      回复
  • 就在那里
    就在那里
    07-31


    07-31
    赞同
    回复 6
    • 希望熊🐻
      希望熊🐻
      07-31
      得劲
      07-31
      回复
    • 就在那里
      就在那里
      07-31回复希望熊🐻
      做不到movable-view那么流畅,而且做了节流,快速拖动的话会跳动,不用movable-view的话,不知道有没有更好的方法
      07-31
      回复
    • 希望熊🐻
      希望熊🐻
      07-31回复就在那里
      确实没有那么流畅,如果不考虑movable-view的话,我现在一般如果需要频繁操作dom的话,我会放在自定义组件里面去实现,用他自定义组件自己的线程去刷新页面,至少不会影响主页面的流畅度,但是像你这种拖动图片的还没尝试过,不过写过一个评分组件感觉还可以 欢迎感受:(片段)https://developers.weixin.qq.com/s/JTWIegmN7ta2
      07-31
      回复
    • 就在那里
      就在那里
      07-31回复希望熊🐻
      是的,像覆盖在camera组件上的那个页面流畅度会比没有原生组件的要差,体验了一下你的组件,或许可以结合你这种做法可能会效果会更好
      07-31
      回复
    • 希望熊🐻
      希望熊🐻
      07-31
      相互学习!
      07-31
      1
      回复
    查看更多(1)
  • wuldjxixgk
    wuldjxixgk
    08-23

    第三点说的有问题吧,js文件接收到数据后,再对wxml文件做相关的样式修改。这里js文件接收到数据后不也得setData才能触发wxml的样式修改??

    08-23
    赞同
    回复 5
    • 就在那里
      就在那里
      08-26
      要啊,你不setData怎么修改样式?这样做只是为了避开图一那种单一通道来回传输数据,造成的阻塞而已
      08-26
      回复
    • wuldjxixgk
      wuldjxixgk
      08-26回复就在那里
      了解,但是频繁的setData不是也会造成阻塞吗?
      08-26
      回复
    • 就在那里
      就在那里
      08-26
      所以把节流也弄上去,最好的就是在自定义组件中使用这种方法,效果上会好很多
      08-26
      回复
    • wuldjxixgk
      wuldjxixgk
      08-26回复就在那里
      了解 也就是在自定义组件上绑定touchmove会比原生组件要效果好?
      08-26
      回复
    • 就在那里
      就在那里
      08-26回复wuldjxixgk
      可以这么理解
      08-26
      回复