This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

This article is suitable for ordinary people to view, please point out any mistakes

Train of thought

• 1. Create a custom component file

• 2. Write the basic WXML and WXSS files
• 3. Make the return arrow click area bigger for easy clicking
• 4. Put the title part of the fixed width, if beyond the width of the ellipsis displayed
• 5. Call the API provided by wechat in JSwx.getMenuButtonBoundingClientRect()Get capsule size and location
• 6. In the previous step, get the position dynamically to set the style, usestyleSet the style
• 7. If you have a page native component suggest using itcover-viewBut there are no pseudo-classes using this tag, so you can’t use pseudo-classes to write arrow styles
• 8. I use the bottom of the capsule herebuttonIs the overall height, all need to add6pxThis will be more beautiful view, otherwise it will stick to the edge
• Please read on for the renderings and the code section below:

<view class="custom_header" style="height:{{barHeight + 6}}px;">
    <view class="arrow" style="height:{{titleHeight}}px; top:{{top}}px;"></view>
    <view class="custom_header_title" style="height:{{titleHeight}}px; line-height:{{titleHeight}}px; top:{{top}}px;">Visitors to the details</view>
</view>
Copy the code

data: {
    barHeight: 56.titleHeight: 32.top: 24
},
methods: {
        init() {
            // Right capsule size height
            let getMenuButton = wx.getMenuButtonBoundingClientRect();
            console.log(getMenuButton, 'getMenuButton')
            this.setData({ barHeight: getMenuButton.bottom,
                            titleHeight: getMenuButton.height,
                            top: getMenuButton.top }); }},lifetimes: {
    // A lifecycle function, which can be a function or a method name defined in the Methods section
    attached: function () {this.init(); },moved: function () {},detached: function () {},},Copy the code

.custom_header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #ccc;
  z-index: 10000; }
  .custom_header .arrow {
    position: absolute;
    width: 80rpx;
    height: 64rpx;
    margin-left: 0; }
    .custom_header .arrow::before {
      content: "";
      position: absolute;
      left: 25rpx;
      top: 50%;
      width: 22rpx;
      height: 22rpx;
      border-top: 1px solid #ffffff;
      border-right: 1px solid #ffffff;
      -webkit-transform: translate(0, -50%) rotate(-135deg);
      -moz-transform: translate(0, -50%) rotate(-135deg);
      transform: translate(0, -50%) rotate(-135deg); }
  .custom_header .custom_header_title {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 420rpx;
    font-size: 34rpx;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }
Copy the code

If you have any questions, please note and reply as soon as possible

Remember to like it. Thank you