微信小程序传参——tab选项卡的几种实现方式

版本（一）：需要定义多个函数，代码冗余

<view class="container">
  <view class='up'>
    <view bindtap='fun1'>新闻</view>
    <view bindtap='fun2'>财经</view>
    <view bindtap='fun3'>体育</view>
  </view>
  <view class='down'>
    <view style='display:{{d1}}'>新闻1</view>
    <view style='display:{{d2}}'>财经2</view>
    <view style='display:{{d3}}'>体育3</view>
  </view>
</view>
        data: {
    d1: 'block',
    d2: 'none',
    d3: 'none',
  },
  fun1: function () {
    var that = this;
    that.setData({
      d1: 'block',
      d2: 'none',
      d3: 'none',
    })
  },
  fun2: function () {
    var that = this;
    that.setData({
      d1: 'none',
      d2: 'block',
      d3: 'none',
    })
  },
  fun3: function () {
    var that = this;
    that.setData({
      d1: 'none',
      d2: 'none',
      d3: 'block',
    })
  },

版本（二）

<view class="container">
  <view class='up'>
    <view id='a1' bindtap='fun'>新闻</view>
    <view id='a2' bindtap='fun'>财经</view>
    <view id='a3' bindtap='fun'>体育</view>
  </view>
  <view class='down'>
    <view style='display:{{d1}}'>新闻1</view>
    <view style='display:{{d2}}'>财经2</view>
    <view style='display:{{d3}}'>体育3</view>
  </view>
</view>
        data: {
    d1: 'block',
    d2: 'none',
    d3: 'none',
  },
  fun: function (e) {
    var that = this;
    var targets = e.currentTarget.id;
    if(targets=='a1'){
      that.setData({
        d1: 'block',
        d2: 'none',
        d3: 'none',
      })
    } else if (targets == 'a2'){
      that.setData({
        d1: 'none',
        d2: 'block',
        d3: 'none',
      })
    } else if (targets == 'a3'){
      that.setData({
        d1: 'none',
        d2: 'none',
        d3: 'block',
      })
    }
  },

利用e对象中的currentTarget.id的值，确认点击对象。虽然只定义一个函数，但是，判断量大，代码冗余。而且id值只能是字母开头的，不灵活，可以用currentTarget.dataset传递任意类型的参数

<view data-a='1' bindtap='fun'>新闻</view>
fun: function (e) {
    var targets = e.currentTarget.dataset.a;
console.log(targets);//输出1
}

版本（三）

<view class='up'>
    <view data-t='0' bindtap='fun'>新闻</view>
    <view data-t='1' bindtap='fun'>财经</view>
    <view data-t='2' bindtap='fun'>体育</view>
  </view>
  <view class='down'>
    <view style='display:{{arr[0]}}'>新闻1</view>
    <view style='display:{{arr[1]}}'>财经2</view>
    <view style='display:{{arr[2]}}'>体育3</view>
  </view>
        data: {
    arr: ['block', 'none', 'none']
  },
  fun: function (e) {
    var that = this;
    var targets = that.data.arr;
    for (var i = 0; i < targets.length; i++) {
      targets[i] = 'none';
    }
    targets[e.currentTarget.dataset.t] = 'block';
    that.setData({
      arr: targets
    })
  },

版本（四）

 <view class="container">
  <view class='up'>
    <view data-t='0' bindtap='fun'>新闻</view>
    <view data-t='1' bindtap='fun'>财经</view>
    <view data-t='2' bindtap='fun'>体育</view>
  </view>
  <view class='down'>
    <view wx:if='{{p==0}}'>新闻1</view>
     <view wx:if='{{p==1}}'>财经2</view>
      <view wx:if='{{p==2}}'>体育3</view>
  </view>
</view>
             data: {
    p:0
  },
  fun: function (e) {
    var that = this;
    that.setData({
      p: e.currentTarget.dataset.t
    })
  },
                <view wx:if='{{p==0}}'>新闻1</view>
     等于
<block wx:if='{{p==0}}'>
    <view>新闻1</view>
</block>

版本（五）

 <view class="container">
  <view class='up'>
    <view wx:for="{{array}}" class="brr{{index}}" data-t="{{index}}" bindtap="fun">{{item}}</view>
  </view>
  <view class='down'>
    <view wx:if='{{p==0}}'>新闻1</view>
     <view wx:if='{{p==1}}'>财经2</view>
      <view wx:if='{{p==2}}'>体育3</view>
  </view>
</view>
        data: {
    array: ['新闻', '财经', '体育'],
    p:0
  },
  fun: function (e) {
    var that = this;
    that.setData({
      p: e.currentTarget.dataset.t
    })
  },

wx:for 循环在标记内可以使用{{item}}指代对应的下标里面的值。可以使用{{index}}表示下标。如果想自定义用别的名字表示下表，可以这样重置：wx:for-index="j" wx:for-item="k"