| 定义段 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| properties | ObjectMap | 否 | 组件的对外属性 , 是属性名到属性设置的映射表 |
| data | Object | 否 | 组件的内部数据 , 和properties一同用于组件的模板渲染 |
| observers | Object | 否 | 组件数据字段监听器 , 用于监听properties和data的变化 |
| methods | Object | 否 | 组件的方法 , 包括事件相应函数和任意自定义方法 |
| created | Function | 否 | 组件生命周期函数 , 在组件实例刚刚被创建时执行 , 注意此时不能调用setData |
| attached | Function | 否 | 组件生命周期函数 , 在组件实例进入页面节点树时执行 |
| ready | Function | 否 | 组件生命周期函数 , 在组件布局完成后执行 |
| moved | Function | 否 | 组件生命周期函数 , 在组件实例被移动到节点树另一个位置时执行 |
| detached | Function | 否 | 组件生命周期函数 , 在组件实例被从页面节点树移除时执行 |
自定义一个组件 , 用来实现tab切换效果
自定义一个组件 , 用来实现tab切换效果
一、创建
- 官方没有固定要求 , 一般都是放在根目录下的commponents文件夹中
(1). 新建commponents文件夹→新建控件文件夹Tabs(名字随意)→小程序开发工具中右键 , 新建commponents
(2). "component": true 表示是自定义组件
自定义组件的json文件内容
(3). 需要引用的地方 , 打开要引用文件的json文件, 在usingComponents中加Tabs的相对路径 : "Tabs":"../../commponents/Tabs/Tabs"
demo5文件引用自定义组件Tabs
- 先在tabs自定义控件中实现切换效果(所有内容都先写在tabs中 , 后边再修改为动态)
(1). 用list存放tabs上显示的内容和选中效果
(2). 布局用for循环实现tab
(3). 自定义控件.js文件中,存放事件回调函数的时候,必须存放在methods中
tabs.wxml
<view class="tabs">
<view class="tab_title">
<view wx:for="{{tabs}}" wx:key="{{tabs.id}}" class="title_item {{item.isActive?'active':''}}" bindtap="handleItemTap" data-index="{{index}}">
{{item.name}}
</view>
</view>
<view class="tabs_content">内容</view>
</view>
上方title_item的class中title_item和后边设置active中间有空格
tabs.js
/**
* 组件的初始数据
*/
data: {
tabs: [
{
id: 0,
name: '首页',
isActive: true
},
{
id: 1,
name: '原创',
isActive: false
},
{
id: 2,
name: '分类',
isActive: false
},
{
id: 3,
name: '关于',
isActive: false
}
]
},
/**
* 1. 页面.js文件中,存放事件回调函数的时候,存放在data同层级下
* 2. 组件.js文件中,存放事件回调函数的时候,必须存放在methods中
* 组件的方法列表
*/
methods: {
//绑定点击事件,需要再methods中绑定
handleItemTap(e) {
/**
1. 绑定点击事件,需要再methods中绑定
2. 获取被点击的索引
3. 获取原数组
4. 对数组循环
1. 给每一个循环性,选中属性改为false
2. 给当前的索引项选中属性给true
*/
console.log("点击咯!");
console.log(e);
//获取被点击的索引
const { index } = e.currentTarget.dataset;//{index} 是es6中的解构赋值(我也不是很懂这里 , 跟着老师敲得 , 之后学习一下)
//获取data中的数组
//解构 对复杂类型进行解构的时候,复制了一份变量的引用而已
//最严谨的做法 重新拷贝一份数组,再对这个数组的北方进行处理 : let tabs = JSON.parse(JSON.stringify(this.data.tabs));
//不要直接修改this.data.数据
let { tabs } = this.data;//相当于 let tabs = this.data.tabs;
//对数组循环(给每一个循环性,选中属性改为false;给当前的索引项选中属性给true)
//[].forEach遍历数组 遍历数组的时候修改了v 也会导致原数组被修改
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
this.setData({
tabs
})
}
}
})
tabs.wxss
/* tab布局 */
.tabs{
}
/* item带文字的一个布局 */
.tab_title{
display: flex;
padding: 10rpx 0;
}
/* item文字显示效果 */
.title_item{
flex: 1;
display: flex;
justify-content: center;
padding: 10rpx;
align-items: center;
}
/* 选中效果 */
.active{
color: red;
border-bottom: 5rpx solid currentColor;
}
/* 下边内容布局 */
.tabs_content{
}
