小程序自定义标题栏写法(适配各种大小刘海屏)

智慧大石 2021/7/26 20:05:43

思路1.先创建一个自定义组件文件2.把基本wxml及wxss文件写好3.把返回的箭头点击区域弄大点方便点击4.把标题部分固定宽度,如果超出宽度省略号显示5.在js里面调用微信提供的apiwx.getMenuButtonBoundingClientRect()获取胶囊大小及位置6.上一步,得到的位置动态去设置样式…

思路

  • 1.先创建一个自定义组件文件

http://img3.sycdn.imooc.com/60fc2d5f000176e902550196.jpg

  • 2.把基本wxml及wxss文件写好

  • 3.把返回的箭头点击区域弄大点方便点击

  • 4.把标题部分固定宽度,如果超出宽度省略号显示

  • 5.在js里面调用微信提供的apiwx.getMenuButtonBoundingClientRect()获取胶囊大小及位置

  • 6.上一步,得到的位置动态去设置样式,使用style设置样式

  • 7.如果你有页面原生组件建议使用cover-view,但是使用这个标签没有伪类,所有不能使用伪类写箭头样式

  • 8.我这里使用胶囊底部button为整体高度,所有需要加上6px这样会更美观点,不然会贴边

  • 效果图如下及代码部分请继续阅读:

http://img4.sycdn.imooc.com/60fc2d5f0001c4b603760100.jpg

<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;">访客详情</view>

</view>



data: {

    barHeight: 56,

    titleHeight: 32,

    top: 24

},

methods: {

        init() {

            // 右边胶囊大小高度

            let getMenuButton = wx.getMenuButtonBoundingClientRect();

            console.log(getMenuButton, 'getMenuButton')

            this.setData({ barHeight: getMenuButton.bottom,

                            titleHeight: getMenuButton.height,

                            top: getMenuButton.top });

        }

},

lifetimes: {

    // 生命周期函数,可以为函数,或一个在methods段中定义的方法名

    attached: function () {this.init();},

    moved: function () { },

    detached: function () { },

},


.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; }




作者:哈罗哈皮


随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[小程序自定义标题栏写法(适配各种大小刘海屏)]http://www.zyiz.net/tech/detail-208414.html

上一篇:小程序如何实现自定义tabBar

下一篇:微信小程序开发 —— 基础知识

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程