小程序自定义headed 头部

<!-- 组件 custom-component.wxml -->

<view class='flex commonHead top' 
  style='color:{{navbarBg.topColor == "#ffffff"?"#000000":"#ffffff"}};background-color:{{navbarBg.topColor}};height:{{commonHeadHeight.titleHeight}}px;'>
  <view class='commonHead-wrap flex'>
    <view class='commonHead_left' style="height:{{commonHeadHeight.titleHeight - commonHeadHeight.statusBarHeight}}px;line-height:{{commonHeadHeight.titleHeight - commonHeadHeight.statusBarHeight}}px;">
      <text>霸王餐</text>
    </view>
    <view class='commonHead_right flex' style="height:{{commonHeadHeight.titleHeight - commonHeadHeight.statusBarHeight}}px;">
      <view class='commonHead_right_text line1' bindtap="onRouter">
        <view class="search" style='background-color:{{navbarBg.topColor == "#ffffff"?"#f1f1f1":"rgba(255, 255, 255, 0.57)"}}'>
          <image src="../../../image/BWC/search.png" wx:if="{{navbarBg.topColor == '#ffffff'}}"></image>
          <image src="../../../image/BWC/search.png" wx:else></image>
          <text>{{navbarData.name}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

Component({
  properties: {
    navbarData: {
      type: Object,
      value: {
        "bg_color": "white",
        "color": "#000",
        "flag": 1,
        "name": "搜索好物"
      }
    },
    navbarBg: {
      type: Object,
      value: {
        'topColor': 'transparent'
      }
    },
    commonHeadHeight: {
      type: Object,
      value: {}
    }
  },
  data: {
    navbarBg: {}
  }, // 私有数据，可用于模版渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },
  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function () {
    var that = this;
    wx.getSystemInfo({
      success(res) {
        that.setData({
          "commonHeadHeight.statusBarHeight": res.statusBarHeight -4,
          "commonHeadHeight.titleHeight": res.statusBarHeight + 50,
        });

      }
    })
  },
  pageLifetimes: {},
  methods: {}
})

来源：https://www.cnblogs.com/baifubin/p/11880199.html

标签

自定义view