微信小程序 - 17-1.自定义组件tabs

定义段	类型	是否必填	描述
properties	ObjectMap	否	组件的对外属性 , 是属性名到属性设置的映射表
data	Object	否	组件的内部数据 , 和properties一同用于组件的模板渲染
observers	Object	否	组件数据字段监听器 , 用于监听properties和data的变化
methods	Object	否	组件的方法 , 包括事件相应函数和任意自定义方法
created	Function	否	组件生命周期函数 , 在组件实例刚刚被创建时执行 , 注意此时不能调用setData
attached	Function	否	组件生命周期函数 , 在组件实例进入页面节点树时执行
ready	Function	否	组件生命周期函数 , 在组件布局完成后执行
moved	Function	否	组件生命周期函数 , 在组件实例被移动到节点树另一个位置时执行
detached	Function	否	组件生命周期函数 , 在组件实例被从页面节点树移除时执行

自定义一个组件 , 用来实现tab切换效果

自定义一个组件 , 用来实现tab切换效果

一、创建

1. 官方没有固定要求 , 一般都是放在根目录下的commponents文件夹中

(1). 新建commponents文件夹→新建控件文件夹Tabs(名字随意)→小程序开发工具中右键 , 新建commponents
(2). "component": true 表示是自定义组件

自定义组件的json文件内容

(3). 需要引用的地方 , 打开要引用文件的json文件, 在usingComponents中加Tabs的相对路径 : "Tabs":"../../commponents/Tabs/Tabs"

demo5文件引用自定义组件Tabs

2. 先在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{

}