微信小程序 实现类似button或navigator的点击效果

写在前面，想看效果图？没有。搞那玩意太费时间(主要还是不会)，无图，咱就言*啦，你能咋地？

写小程序的时候，你有没有这种困惑，比如，写两字“跳转”，你既不跳转（navigator），你也不想用button，我就想用view，但还想处理点击事件，哎，我气死你。但是，你是否苦于，没有点击效果，点了就是点了，没点反应，很生硬有没有？你想说是不是傻逼？hover-class不知道？小弟知道啊，小弟也用了，是不是设置起来很麻烦？每一个都要处理？小弟有一个写着项目突然脑子好使了，透明度！对，就是透明度。不废话了：

封装一个组件，就叫它A，方便使用，想用的时候，直接<A></A>。你可别学我起个名叫A。。。。。

组件四个文件如下：

A .js:

Component({
  externalClasses: ['A-class'],  //外部样式类，不懂得去看官方文档
  /**
   * 组件的属性列表
   */
  properties: {
    
  },

  /**
   * 组件的初始数据
   */
  data: {
    _opacity: 1,   //透明度，初始值为1，即全透明
  },

  /**
   * 组件的方法列表
   */
  methods: {

    //手指按下事件，把透明度给它改成0.5，即一半透明，就是模糊一下，达到点击的效果
    _touchStart:  function (e)  {
      this.setData({
        _opacity:0.5
      })
    },

    //手指抬起，透明度给它设置会1，天空又透彻明亮了有木有！
    //这里设置了一个定时器，手指抬起后0.2秒在把透明度设置回去，
    //因为快速点击效果不是很明显，根据自己的需求自己配置时间
    _touchEnd:  function (e)  {
      setTimeout(()=>{
        this.setData({
          _opacity: 1
        })
      },200)
    }, 
  }
})

A .json:

{
  "component": true,
  "usingComponents": {}
}

A .wxml:

<view class="A-class" style="opacity:{{_opacity}};" bindtouchstart="_touchStart" 
bindtouchend="_touchEnd" >
<slot></slot>  
</view>

A .wxss:   没错  这个文件啥都写，嘤嘤嘤。

好了，下面可以使用了。假设在页面B使用。

B .json:

{
  "navigationBarTitleText": "",
  "usingComponents": {
    "A":"../../components/A/A"
  }
}

B .wxml:

<A A-class="你自定义样式" bindtap="点击事件">
      //这里面你想写啥写啥,什么view啦，text啦，image啦。。。。
</A>

去试试效果吧，我没有效果图，我不会弄（其实是懒），嘤嘤嘤。