小程序方法封装和组件封装

先给对象赋值一个属性，例如给wx这个单例

组件封装：
js里面属性,定义自定义属性

  properties: {
    name: {
      type: String,
      value:'1'
    },
    size: {
      type: Number,
      value:0
    }
  },

组件方法传递：

wxml里面绑定组件自己的方法：
  <image bind:tap="back"/>
js文件组件自己的方法里面调用 triggerEvent 参数是绑定的方法名，后面是传递的值
back: function () {
      this.triggerEvent('backTap', { name: 'haha' });
    },
父组件wxml文件里面通过bing:back 绑定方法 
<sean-nav bind:back="backTap" />
然后在父组件的js文件里面实现 evt.detail即是传递的参数
  backTap:function (evt) {
    console.log(evt.detail)
  },

动态样式使用style,使用属性字符串更改style

<view style="{{statusBarStyle}}"></view>

字符串拼接：

     const statusBarStyle = `
      height: ${wx.db.statusBarHeight}px;
      background-color:${this.data.statusBarColor}
      `;

如果key和value是同一个名字：

this.setData({statusBarStyle,navBarStyle:navBarStyle });
等同于
this.setData({
        statusBarStyle: statusBarStyle,
        navBarStyle:navBarStyle
      });

自定义导航栏：json文件里面添加 添加自定义组件

{
  "usingComponents": {
    "sean-nav" : "/cpms/sean-nav/sean-nav"
  },
  "navigationStyle":"custom"
}

小程序导航栏悬停效果:
1.添加导航栏样式

.container{
  position: sticky;
  top: 0;
  z-index: 99;
}

2.外层的view给一个固定高度

    <view class="container" style="height:{{topHeight}}px">
        <view style="{{statusBarStyle}}"></view>
        <view class="sean-nav" style="{{navBarStyle}}">
            {{title}}
            <view class="icons">
                <image bind:tap="back" wx:if="{{back == 'true'}}" class="back" src="/assets/imgs/nav_back.png"></image>
                <image bind:tap="home" wx:if="{{home == 'true'}}" class="home" src="/assets/imgs/nav_home.png"></image>
            </view>
        </view>
    </view>

或者在外层包一个view:

.container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
<view style="height:{{topHeight}}px">
    <view class="container" style="height:{{topHeight}}px">
   ......
    </view>
</view>