一：Vant組件庫(kù)
步驟一：通過 npm 安裝

npm i @vant/weapp -S --production
將 app.json 中的 "style": "v2" 去除，小程序的新版基礎(chǔ)組件強(qiáng)行加上了許多樣式，難以覆蓋，不關(guān)閉將造成部分組件樣式混亂。

步驟二：修改 app.json
步驟三：修改 project.config.json

1. 組件：

   * 組件的屬性列表
   */
  properties: {
    //定義組件需要傳遞的屬性
    label:{
      //類型是字符串
      type:String,
      //默認(rèn)值是空
      value:''
    },
    list:{
      //類型是數(shù)組
      type:Array
    },
    //高亮索引
    activeIndex:{
      //類型是Number
      type:Number,
      //默認(rèn)值是0
      value:0
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    
  },

```  /**
   * 組件的方法列表
   */
  methods: {
    // 選項(xiàng)點(diǎn)擊事件
    click(e) {
      //獲取數(shù)據(jù)參數(shù)index
      let {index} = wx.$key(e)
      this.setData({
        //更新高亮索引
        activeIndex: index
      })
      // 觸發(fā)一個(gè)自定義事件，將值通過事件對(duì)象的方式回傳出去
      this.triggerEvent('syncData',index)
    }
  }
})

二：自定義組件
1. tabMenu組件
/* 注意：組件中默認(rèn)不會(huì)引入全局樣式，如果要用全局樣式，需要手動(dòng)引入 */
@import '../../app.wxss';
.item{
  margin: 10rpx 0;
}
.title{
  padding: 10rpx 20rpx;
  color: #248067;
}
.tab{
  padding: 10rpx 20rpx;
  border:1px solid #eeeeee;
  margin: 0 2px;
}
.tab.active{
  background: #248067;
  color: #ffffff;
}
/**
   * 組件的屬性列表：用于接收調(diào)用組件的頁(yè)面?zhèn)鬟^來的數(shù)據(jù)
   */

/**
   * 組件的屬性列表：用于接收調(diào)用組件的頁(yè)面?zhèn)鬟^來的數(shù)據(jù)
   */
  properties: {
    //添加組件的屬性
    //該屬性接收需要呈現(xiàn)的數(shù)據(jù)
    list:{
      //類型是數(shù)組，表示只能給該屬性傳數(shù)組值
      type:Array
    },
    //該屬性接收高亮索引
    active:{
      //該屬性是數(shù)字類型
      type:Number,
      //該屬性的默認(rèn)值0
      value:0
    },
    //該屬性接收標(biāo)題信息
    label:{
      type:String,
      value:'選項(xiàng)'
    }
  },
/**
   * 組件的方法列表：組件的方法，必須要放在這里定義
   */
  methods: {
    change(e){
      let {active} = wx.$key(e)
      this.setData({
        active
      })
      //組件內(nèi)部觸發(fā)一個(gè)事件
      //組件外部通過執(zhí)行該事件，通過事件方法，獲取傳出來的數(shù)據(jù)
      // this.triggerEvent("change",{active,label:this.data.label})
      this.triggerEvent("change",active)
    },
  }