咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 309|回复: 0

[JavaScript] 微信小程序自定义顶部组件customHeader的示例代码

[复制链接]
  • TA的每日心情
    无聊
    2019-4-21 13:02
  • 签到天数: 3 天

    [LV.2]圆转纯熟

    发表于 2020-7-6 19:49:25 | 显示全部楼层 |阅读模式
    1、开启配置自定义顶部
    微信小程序自定义顶部组件customHeader的示例代码-1.png


    {
    "window": {
    "navigationStyle":"custom"
    }
    }在app.json的文件window配置"navigationStyle": "custom"属性即可
    2、自定义顶部计算原理
    2.1 获取系统状态栏的高度和屏幕宽度
    使用wx.getSystemInfo这个函数获取系统状态栏的高度和屏幕宽度。
    微信小程序自定义顶部组件customHeader的示例代码-2.jpg

    2.2 获取右上角胶囊位置信息
    使用wx.getMenuButtonBoundingClientRect()方法获取右上角胶囊位置信息。
    关键问题在于自定义胶囊的上、下和左边距。
    微信小程序自定义顶部组件customHeader的示例代码-3.jpg

    2.3 自定义顶部距离计算代码
    app.js代码如下

    App({
    // 小程序初始化
    onLaunch: function() {
    // 获取自定义顶部高度相关参数
    let capsuleObj = wx.getMenuButtonBoundingClientRect();
    // console.log("==胶囊信息==");
    // console.log(capsuleObj);

    wx.getSystemInfo({
    success: (res) => {
    // console.log("==获取系统信息==");
    // console.log(res)
    var statusBarHeight = res.statusBarHeight; //顶部状态栏高度

    this.globalData.capsuleObj = capsuleObj;
    this.globalData.titleHeight = statusBarHeight + capsuleObj.height + (capsuleObj.top - statusBarHeight) * 2;
    },
    failure() {
    }
    })
    },

    // 全局缓存
    globalData: {
    loginStatus: false,
    },
    })3、封装自定义顶部
    3.1效果图展示
    微信小程序自定义顶部组件customHeader的示例代码-4.png

    微信小程序自定义顶部组件customHeader的示例代码-5.png

    3.2组件代码
    index.wxml

    <!--components/customHeader/index.wxml-->
    <view class="customHeader_box" style="height:{{titleHeight}}px; background-color:{{bgColor}};">
    <!-- 菜单 -->
    <view wx:if="{{menuFlag}}" class="menu_box" style="height:{{capsuleObj.height}}px; top:{{capsuleObj.top}}px;">
    <view class="customIcon" bindtap="meunClick">
    <image src="/images/customMenu.png"></image>
    </view>
    </view>

    <!-- 返回+首页 -->
    <view wx:if="{{backHomeFlag}}" class="backHome_box" style="width:{{capsuleObj.width}}px; height:{{capsuleObj.height}}px; top:{{capsuleObj.top}}px;">
    <view class="customIcon backIcon" bindtap="backClick">
    <image src="/images/customBack.png"></image>
    </view>
    <view class="customIcon homeIcon" bindtap="homeClick">
    <image src="/images/customHome.png"></image>
    </view>
    </view>

    <!-- 标题 -->
    <view class="customHeader_title" style="top:{{capsuleObj.top}}px; height:{{capsuleObj.height}}px; line-height:{{capsuleObj.height}}px;">
    {{customTitle}}
    </view>
    </view>

    <!-- 自定义顶部距离修正 -->
    <view class="customWrap" style="height:{{titleHeight}}px;"></view>index.wxss

    /* components/customHeader/index.wxss */

    .customHeader_box {
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    }

    .customIcon {
    flex: 1;
    }

    .customIcon image {
    width: 30rpx;
    height: 30rpx;
    }

    /* 菜单 */
    .menu_box{
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    left: 10px;
    z-index: 11;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    .menu_box .customIcon image{
    width: 36rpx;
    height: 36rpx;
    }

    /* 返回+首页 */

    .backHome_box {
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    left: 10px;
    z-index: 11;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    .backIcon {
    border-right: 1rpx solid #e5e5e5;
    }

    /* 标题 */

    .customHeader_title {
    width: 100%;
    padding-left: 115px;
    padding-right: 115px;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    text-overflow: ellipsis;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    left: 0;
    z-index: 10;
    }

    /* 自定义顶部距离修正 */
    .customWrap{
    width: 100%;
    position: relative;
    left: 0;
    z-index: 99998;
    }index.js

    // components/customHeader/index.js
    const app = getApp();

    Component({
    /**
    * 组件的属性列表
    */
    properties: {
    customTitle: String,
    bgColor: {
    type: String,
    value: '#fff'
    },
    menuFlag: {
    type: Boolean,
    value: false
    },
    backHomeFlag: {
    type: Boolean,
    value: false
    },
    },

    /**
    * 组件的初始数据
    */
    data: {

    },

    attached: function() {
    this.setData({
    titleHeight: app.globalData.titleHeight,
    capsuleObj: app.globalData.capsuleObj
    })
    },

    options: {
    multipleSlots: true, //开启多slot
    },

    /**
    * 组件的方法列表
    */
    methods: {
    // 菜单
    meunClick: function () {
    wx.navigateTo({
    url: '/pages/menu/menu',
    })
    },

    // 返回
    backClick: function() {
    wx.navigateBack({
    delta: 1
    })
    },

    // 回首页
    homeClick: function() {
    wx.navigateTo({
    url: '/pages/index/index'
    })
    },
    }
    })index.json

    {
    "component": true
    }4、组件使用方法
    index.wxml

    <!--pages/index/index.wxml-->

    <!-- 自定义顶部 -->
    <customHeader menuFlag customTitle="首页"></customHeader>

    <view class="url">
            <navigator hover-class="none" url="../child/child">跳到子页</navigator>
    </view>ps:我这边封装了2个样式,meneFlag是菜单的。backHomeFlag是“返回+首页”样式的。
    json配置

    {
    "usingComponents": {
    "customHeader": "/components/customHeader/index"
    }
    }5、小结
    此组件兼容性,可以兼容安卓、IOS、刘海屏,如果你们测试出来有新bug,可以在gitHub提出issues,帮助您解决。
    链接在此:
    微信小程序自定义顶部组件
    到此这篇关于微信小程序-自定义顶部组件customHeader的文章就介绍到这了,更多相关微信小程序自定义顶部组件内容请搜索咔叽论坛以前的文章或继续浏览下面的相关文章希望大家以后多多支持咔叽论坛!

    原文地址:https://www.jb51.net/article/187945.htm

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 06:21

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表