微信小程序 自定义tab栏组件 的数据传递

首先，页面中的调用：

 1.page.json:

"usingComponents": {

    "tab" : "../../components/tab/tab"

  }

2.page.wxss:

通过标签向组件传递数据，代码如下：

<view>
    <tab tabNames = "{{tabNames}}"></tab>
</view>

3.page.js:

定义要传递的tabNames数组：

Page({
  data: {
    tabNames : ['新闻','娱乐','我的']
  }
})

4.效果：

以下就是在页面中的效果（暂时还没有改进样式，有点丑还请见谅）

直接修改tabNames这个数组，tab栏的头也会相应的更改

---

以下是自定义组件的具体实现：

1.tab.json:

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

2.tab.wxml:

<!--components/tab/tab.wxml-->
<view class="tab">
  <viev class="tab-title">
    <!-- <view class="title-item active">首页</view>
    <view class="title-item">新闻</view>
    <view class="title-item">娱乐</view>
    <view class="title-item">收藏</view>
    <view class="title-item">我的</view> -->
    <!-- 上面的代码和下面的等价 -->

    <!-- 判断选中的tab项，并赋予其active属性 -->
    <view
    wx:for = "{{tabs}}" 
    wx:key = "id"
    class="title-item {{item.isActive?'active':''}}" 
    bindtap="navItemTap"
    data-index = "{{index}}"
    >
    {{item.name}}
    </view>
  </viev>
  <view class="tab-cont">
    我是tab内容
  </view>
</view>

3.tab.js:

说明：1.生命周期函数attached 的作用，是拿到页面传递过来的navName数据，并对页面进行重新渲染，这和 data{} 中注释掉的、直接定义的初始数据达到相同的效果；

2.method 里定义了获取当前tab项，并将字体颜色改为红色的事件。这是b站上网课中教的代码，我直接拿来用了；前面的内容是我自己对网课的改进。

// components/tab/tab.js
Component({

  // 组件的生命周期函数，用来初始化数据：
  lifetimes:{
    attached:function(){
      // 获取页面传递的数据：
      let tabNames = this.data.tabNames;
      // 定义tab对象的构造函数：
      function createTab(id, tabName, isActive){
        this.id = id;
        this.name = tabName;
        this.isActive = isActive;
      }
      var tabs = [];
      let tab = new createTab(0,tabNames[0],true);
      tabs.push(tab);
      //循环，定义对象的数组
      for (let index = 1; index < tabNames.length; index++) {
        let tab = new createTab(index,tabNames[index],false);
        tabs.push(tab);
      }
      //setData:
      this.setData({
        tabs//通过setData方法刷新页面
      })
    }
  },
  /**
   * 组件的属性列表
   * 从父页面中传递的数据
   */
  properties: {
    tabNames:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // tabs : [
    //   {
    //     id : 0,
    //     name:"首页",
    //     isActive : true
    //   },
    //   {
    //     id : 1,
    //     name:"新闻",
    //     isActive : false
    //   },
    //   {
    //     id : 2,
    //     name:"娱乐",
    //     isActive : false
    //   },
    //   {
    //     id : 3,
    //     name:"收藏",
    //     isActive : false
    //   },
    //   {
    //     id : 4,
    //     name:"我的",
    //     isActive : false
    //   }
    // ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
      navItemTap(e){
      const {index} = e.currentTarget.dataset;//等价于index = e.currentTarget.dataset.index
      // console.log(index);
      let tabs = this.data.tabs;//获取的是data的引用，能修改原数据
      //备份数据的办法：
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)//原数据已被修改，但页面没有刷新
      this.setData({
        tabs//通过setData方法刷新页面
      })
    }
  }
})

4.tab.wxss

.tab{

}
.tab-title{
  display: flex;
  padding-top: 100rpx;
  justify-content: space-around;
  align-items: center;
}
.title-item{

}
.active{
  color: red;
  border-bottom: 5rpx solid currentColor;
}
.tab-cont{

}