一：Vant组件库
步骤一：通过 npm 安装
npm i @vant/weapp -S --production
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
步骤二：修改 app.json
步骤三：修改 project.config.json
- 组件：
* 组件的属性列表
*/
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)
},
}
