微信小程序，touchend不触发的解决方法

最近有个需求，需要在点击时切换图片来产生点击效果。

比如，不点击时显示图片A，手指按下时显示图片B，手指抬起再显示回图片A。

于是我就用touchstart和touchend来做，如下:

wxml:

<view class="backIcon" bindtouchstart="TouchStart" bindtouchend="TouchEnd" >
        <image  src="{{backicon}}" style="width: 100%; height: 100%;"></image>
</view>

js:

TouchStart:function()

{        this,setData({backicon : ""}) //显示图片B

}

TouchEnd:function()

{        this,setData({backicon : ""}) //显示图片A

}

分别在手指按下和离开时，显示不同的图片。结果发现touchend 时而触发，时而不触发

百度一搜，遇到类似问题的不少。我觉得如果是BUG的话，就太明显了，官方不可能不修复。

最后才发现原来是因为我在TouchStart方法里使用了this.setData。由于小程序的逻辑层和视图层是双线程，用了setData似乎对脚本产生了阻塞。

解决方法：

1. 分别定义按下和离开的样式，用hover-class代替touchstart和touchend，图片用background-img显示

如下：

<view class="backIcon" hover-class="touchbackIcon">
             <!--不要image标签-->
</view>

分别将 backIcon 和 touchbackIcon 里的 background-img定义为离开和按下时需要显示的图片。

.backIcon

{

        background-img: url() //显示图片A

        background-size: 90rpx 90rpx 

}

.touchbackIcon

{

        background-img: url() //显示图片B

        background-size: 90rpx 90rpx 

}

但是这会导致一个问题，background-img如果要显示本地图片，需要使用base64格式，这会导致样式表里需要显示一长串字符，而且以后维护和二次开发时，每次都要转换base64，十分不方便

2. 使用wxs（推荐）

我们用wxs定义两个方法handleTouchStart 和 handleTouchEnd，分别让bindtouchstart 和 bindtouchend去调用，而handleTouchStart 和 handleTouchEnd则去调用js里的TouchStart 和 TouchEnd

如下:

<wxs module="touch">

        function handleTouchStart(e, ins)

        {

            ins.callMethod("touchstart",{}); //调用js里的方法

        }

        function handleTouchEnd(e, ins)

        {

            ins.callMethod("touchend",{}); //调用js里的方法

        }

        module.exports = {

            handleTouchStart : handleTouchStart,

            handleTouchEnd : handleTouchEnd

        }

    </wxs>

    <view class="backIcon" bindtouchstart="{{touch.handleTouchStart}}" bindtouchend="{{touch.handleTouchEnd}}" >

        <image  src="{{backicon}}" style="width: 100%; height: 100%;"></image>

    </view>

完美解决这个问题