收藏
回答

实现触摸开始和触摸结束的图片的显隐



需求: 触摸实现方向键上面的小三角的显隐


wxml

<view class='right-view' catchtouchstart="onRightTouchStart" catchtouchend="onRightTouchEnd" >

<image class='right-img' wx:if="{{rightImg}}"  src="/ico/right.png">image>

view>

js

onRightTouchStart: function(event){

this.setData({

rightImg: false

})

},


onRightTouchEnd: function (event) {

this.setData({

rightImg: true

})

}


实现的效果是: 第一次触摸图片隐藏,第二次触摸图片显示。  我想要的项目是每次触摸开始时隐藏,结束时显示。

下图是两次触摸后控制台的输出信息


测试end事件的话,  第一次触摸释放后,end事件不会触发。

谢谢大神了

最后一次编辑于  2018-01-13
回答关注问题邀请回答
收藏

5 个回答

  • 3Q秋
    3Q秋
    2018-01-14

    还有个问题。关于小程序布局的,有什么资料可以学习学习。我看了css的布局,但是在实际布局时还是遇到问题需要找很久。


    就像上面的截图,我实现布局的时候使用的是absolute和relative这两种结合的方式。


    听说flex很强大,但是哪有什么好的资料可以推荐下么?



    2018-01-14
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-01-14

    不要用wx:if把节点删除,用hidden来隐藏吧。因为节点被删除的时候,对应的touch*事件就消失了。

    2018-01-14
    赞同
    回复 5
    • 某某欢
      某某欢
      2018-09-03

      在做长按录制语音的时候也发现了touchend在点击之后快速离开时不会触发,导致松开按钮的时候不会停止录音

      2018-09-03
      回复
    • 小程序技术专员-LastLeaf
      小程序技术专员-LastLeaf
      2018-09-03

      麻烦确认一下是 touchend 事件没有触发还是 stopRecord 没有成功?

      2018-09-03
      回复
    • 某某欢
      某某欢
      2018-09-03回复小程序技术专员-LastLeaf

      stopRecord 没有成功

      2018-09-03
      回复
    • 某某欢
      某某欢
      2018-09-03回复小程序技术专员-LastLeaf

      请问有什么解决办法吗

      2018-09-03
      回复
    • 小程序技术专员-LastLeaf
      小程序技术专员-LastLeaf
      2018-09-04

      猜测是某些平台上录音接口有问题。我们还在排查中。


      麻烦提供一下出问题的机型和微信版本。

      2018-09-04
      回复
  • 3Q秋
    3Q秋
    2018-01-14

    你好,如果是预期中的行为。那像我这种需求的话,如何实现?


    我现在的做法是,重新做了图标,将方向键的小三角抠出来,比如向上,通过向上的区域的背景色变化来实现需求, 但是感觉不好看。


    预期中的行为的话,是不是就是说以后的版本一直是这样? 以这种结果来看,在触摸对象隐藏(或者应该说是销毁)后,这个catchstarttouch 与 catchtap的功能不是就重合了么?

    2018-01-14
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-01-14

    这个是我们预期中的行为,不是bug。

    2018-01-14
    赞同
    回复
  • 3Q秋
    3Q秋
    2018-01-13


    问题找到, 是因为 else的图片覆盖到了if中的图片的位置,导致if中图片的end事件消失;

    不知道这个算不算一个bug

    2018-01-13
    赞同
    回复