2021-11-18 小程序

一：Vant组件库
步骤一：通过 npm 安装

npm i @vant/weapp -S --production
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

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

1. 组件：

   * 组件的属性列表
   */
  properties: {
    //定义组件需要传递的属性
    label:{
      //类型是字符串
      type:String,
      //默认值是空
      value:''
    },
    list:{
      //类型是数组
      type:Array
    },
    //高亮索引
    activeIndex:{
      //类型是Number
      type:Number,
      //默认值是0
      value:0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    
  },

```  /**
   * 组件的方法列表
   */
  methods: {
    // 选项点击事件
    click(e) {
      //获取数据参数index
      let {index} = wx.$key(e)
      this.setData({
        //更新高亮索引
        activeIndex: index
      })
      // 触发一个自定义事件，将值通过事件对象的方式回传出去
      this.triggerEvent('syncData',index)
    }
  }
})

二：自定义组件
1. tabMenu组件
/* 注意：组件中默认不会引入全局样式，如果要用全局样式，需要手动引入 */
@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;
}
/**
   * 组件的属性列表：用于接收调用组件的页面传过来的数据
   */

/**
   * 组件的属性列表：用于接收调用组件的页面传过来的数据
   */
  properties: {
    //添加组件的属性
    //该属性接收需要呈现的数据
    list:{
      //类型是数组，表示只能给该属性传数组值
      type:Array
    },
    //该属性接收高亮索引
    active:{
      //该属性是数字类型
      type:Number,
      //该属性的默认值0
      value:0
    },
    //该属性接收标题信息
    label:{
      type:String,
      value:'选项'
    }
  },
/**
   * 组件的方法列表：组件的方法，必须要放在这里定义
   */
  methods: {
    change(e){
      let {active} = wx.$key(e)
      this.setData({
        active
      })
      //组件内部触发一个事件
      //组件外部通过执行该事件，通过事件方法，获取传出来的数据
      // this.triggerEvent("change",{active,label:this.data.label})
      this.triggerEvent("change",active)
    },
  }