微信小程序事件catchtap实现选项卡

关于事件参考：https://www.cnblogs.com/eline2018/p/10394974.html

1、什么是事件
(1) 事件是视图层到逻辑层的通讯方式。

(2) 事件可以将用户的行为反馈到逻辑层进行处理。

(3) 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

(4) 事件对象可以携带额外信息，如 id,dataset,touches

index.wxml

 <view class="tab">
    <text class="{{menuTapCurrent=='1' ? 'active':''}}" catchtap="menuTap" data-current="1" >公司新闻</text>
    <text class="{{menuTapCurrent=='2' ? 'active':''}}" catchtap="menuTap" data-current="2">行业新闻</text>
  </view>

index.js在data中menuTapCurrent=1初始化默认值，然后根据点击事件获取值赋值给选中的改变颜色样式

data: {
    indicator_dots:true,
    indicator_color: "#ffffff",
    indicator_active_color:"#F8626E",
    autoplay: true,
    interval: 3000,
    circular: true,
    menuTapCurrent: '1' 
  },
  menuTap:function (event) {
    // console.log(event);
    var current = event.currentTarget.dataset.current;//获取到绑定的数据
    var that = this;//这里注意，要不然setData不可用
    //改变menuTapCurrent的值为当前选中的menu所绑定的数据
    this.setData({
      menuTapCurrent: current
    });
  },

关于点击实现后端数据切换

menuTap:function(e){
      //console.log(e);
    var current = e.currentTarget.dataset.current;//获取到绑定的数据
    //console.log(current);
    var that = this;//这里注意，要不然setData不可用
    //改变menuTapCurrent的值为当前选中的menu所绑定的数据
    this.setData({
      menuTapCurrent: current
    });
    wx.showLoading({
      title: '加载中',
      mask: true
    })
    //新闻资讯
    wx.request({
      url: 'http://www.yzm.com/index.php/api/news/index',
    method: 'POST',
    data: {
      cat_id: current,
    },
    header: {
      'content-type': 'application/x-www-form-urlencoded' // 默认值
    },
    success(res) {
      that.setData({
        news: res.data.data
      });
    },
    complete() {//加载完成后隐藏
      wx.hideLoading();
    }
  })
  }