小程序自定义组件05

1、定义Componet文件夹，定义Tabs组件

• js文件
  properties组件的属性列表 里面存放的是从父组件接受的数据

  properties: {
    //要接受的数据名称
    aaa: {
      // type  要接受的数据的类型 String 大写
      type:String,
      // value 默认值
      value: ""
    },
    tabs:{
      type:Array,
      value:[]
    }

  },

• methods 组件的方法列表
  组件的方法 在methods处理
  this.triggerEvetn("父组件自定义事件的名称",要传递的参数)
  this.triggerEvent("itemChange",{index})

methods: {
    handelTap(e) {

      console.log(e)
      // 1------------------
      // 获取点击中的索引 获取元数组 进行循环
      //  对每一个循环项
      //点击的角标是从 wxss中获取的 注意传递参数的过程

      const { index } = e.currentTarget.dataset;

      // 其实这种方法对复杂的结构类型 仅仅是复制一份  变量的引用而已
      // 相当于  let tabs=this.data.tabs; 
      // let { tabs } = this.data;

      // // 最严谨的写法是 深拷贝
      // let tabss = JSON.parse(JSON.stringify(this.data.tabs))

      // // 数组的循环
      // // [].forEach 遍历数组的时候，修改了v的时候，原数组也会被修改
      // tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);

      // this.setData({
      //   tabs
      // })

      //  2-------------------------------

      // 点击事件触发的时候，触发父组件中自定义事件，同时传递给父组件
      //  this.triggerEvetn("父组件自定义事件的名称",要传递的参数)

      this.triggerEvent("itemChange",{index})
    }
  }

• wxml slot 标签 其实就是一个占位符
  等到父组件调用子组件的时候，在传递过来标签，就会替换slot标签的位置 小程序获取节点绑定数据data-index的方法

{{aaa}}

    
        
        
        
            {{item.name}}
        
    
    
    
    

• wxss display 属性规定元素应该生成的框的类型
  Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
  flex-direction: column-reverse 方向查下质料
  写 padding ： p10rpx
  padding:10px 5px;
  上填充和下填充是 10px
  右填充和左填充是 5px
  justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
  justify-content属性定义了项目在主轴上的对齐方式
  align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

/* components/Tabs/Tabs.wxss */
.tabs{

}
/* 
display 属性规定元素应该生成的框的类型
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
 flex-direction: column-reverse 方向查下质料
 写 padding ： p10rpx 
 padding:10px 5px;
上填充和下填充是 10px
右填充和左填充是 5px 
*/
.tabs_title{
  display: flex ;
  padding: 10rpx 2rpx;
 
}
/* 
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
justify-content属性定义了项目在主轴上的对齐方式
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
*/
.title_item{
    flex: 1;
    display: flex;
    justify-content: center;
    /* 元素位于容器的中心 */
    align-items: center;

}

.active{
    color: red;
    /*
     border-bottom缩写属性设置一个声明中所有底部边框属性 
    currentColor等于当前字体的颜色
    */
    border-bottom: 5rpx solid currentColor;
}
.tabs_content{

}

使用组件 在Demo

1、父组件向子组件传递数据。是通过标签属性的方式来传递的
aaa="123" 传递给子组件
在子组件接受这个值
2、子组件向父组件传递数据： this.triggerEvent("itemChange",{index})

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

    0



    1



    2



    3


父组件传递过来的 

Demo.js

最严谨的写法是 深拷贝
let tabss = JSON.parse(JSON.stringify(this.data.tabs))

数组的循环
[].forEach 遍历数组的时候，修改了v的时候，原数组也会被修改
tabsDemo17.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);

// pages/demo17/demo17.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabsDemo17: [
      {
        id: 0,
        name: "首页Demo17",
        isActive: true
      },
      {
        id: 1,
        name: "原创",
        isActive: false
      },
      {
        id: 2,
        name: "分类",
        isActive: false
      },
      {
        id: 3,
        name: "关于",
        isActive: false
      }

    ]
  },

  //自定义事件，用来接收子组件传递的数据 
  handelItemChange(e) {
    console.log(e)

    const {index}=e.detail;

    let { tabsDemo17 } = this.data;

    // 最严谨的写法是 深拷贝
    // let tabss = JSON.parse(JSON.stringify(this.data.tabs))

    // 数组的循环
    // [].forEach 遍历数组的时候，修改了v的时候，原数组也会被修改
    tabsDemo17.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);

    this.setData({
      tabsDemo17
    })

  },






  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})