小程序自定义组件

一、自定义组件

1、组件的样式

(1)样式隔离

 options:{
    // 样式隔离：apply-shared 父影响子，shared父子相互影响， isolated相互隔离
    styleIsolation:"isolated",
    
},

(2)外部类

externalClasses:["cell-class"],

 <view class="cell cell-class">我是cell组件</view>

在页面中

<cell cell-class="mycell"></cell>
<cell></cell>


.mycell{
  line-height: 120rpx !important;
  color:#F70;
}

2、组件的插槽

（1）默认插槽

         父组件

<cell>
      <text>插槽内容</text>
</cell>

         子组件

<view><slot></slot></view>

（2）命名多插槽

          父组件

<cell>
    <text slot="pre"> 🚒</text>
    <text slot="next">🥗</text>
</cell>

          子组件

options:{ multipleSlots:true}

 

<view>
    <slot name="pre"></slot>
    <slot name="next"></slot>
</view>

3、组件的传参

父传子   property

子传父   triggerEvent

 二、组件的使用

1、定义组件（js，wxml，json，wxss）

2. 页面的 xxx.json 中  usingComponent 注册

"usingComponents": {
"cell":"/components/cell/cell",
"item":"/components/item/item"
}

3、使用组件

<cell></cell>
<item></item>

三、自定义组件 Component 

1、生命周期 lifetimes

     attach 组件的挂载

2、data 数据

3、methods 方法

4、properties 属性（只读）

5、externalClasses 外部类

6、options选项
     multipleSlots:true 多个插槽
     styleIsolation:"isolated" 组件的样式格式

四、例子：定义组件item

1、props

1.     title标题
2.     icon 图标
3.     tip 提示
4.     url 跳转连接
5.     open-type 打开的方式

2、slot

1.     right
2.     left插槽

3、event
    click事件
4、外部类

1.     itemClass 整体
2.     titleClass 标题

五、自定义组件的生命周期

1、组件的生命周期 lifeti        

1.     created 创建（此时还不能调用 setDatames）
2.      attached挂载
3.      detached 卸载

2、页面的生命周期

1.   pageLifetimes
2.     show显示
3.     hide后台运行
4.     resize尺寸变化

六、自定义导航栏的实现

 wx.getMenuButtonBoundingClientRect()
胶囊的边界

wx.getSystemInfoSync();
系统信息（状态栏的高度）

 1、配置自定义状态栏

  lifetimes:{
    attached(){
      //获取系统信息
      var info =wx.getSystemInfoAsync();
      console.log(info);
      //更新状态栏的高度
      this.setData({statusBarHeight:info.statusBarHeight})
      //胶囊位置
      const res=wx.getMenuButtonBoundingClientRect()
      console.log(res);
      //标题栏可以使用的宽度
      this.setData({titleWidth:res.left-7})
    }
  },