微信小程序高度定制导航栏提升项目操作性

最新推荐文章于 2024-07-20 16:32:25 发布
最新推荐文章于 2024-07-20 16:32:25 发布
阅读量842 收藏 12
点赞数 24
分类专栏： 小程序定制开发 文章标签： 微信小程序 小程序 前端 微信开放平台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/manixchenyang/article/details/137153239
版权 
title:  微信小程序自定义导航栏

**** 微信小程序自定义tabbar*

  1. 开启sass支持
    project.config.json

“useCompilerPlugins”: [
“sass”
],

  1. 微信小程序自带的导航功能比较单一，不支持自定义其他属性和状态，仅支持标题等属性，所以这个就得自定义导航了，比如各类电商工具的导航，带搜索框的这些导航，多语言切换的导航

3.下面我使用自定义导航实现导航栏带语言切换模式，将导航做成一个组件即可，组件自带生命周期函数，也可以根据装配的内容自动识别
温馨提示：：：自定义导航区分全局和局部，而自定义tabbar仅支持全局配置

全局配置中年 app.json window
官网配置已经很全![https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html]
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000
navigationBarTextStyle string white 导航栏标题、状态栏颜色，仅支持 black / white
navigationBarTitleText string 导航栏标题文字内容
navigationStyle string default 导航栏样式，仅支持以下值：
default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。 iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持
homeButton boolean default 在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键 微信客户端 8.0.24

  1. 全局配置如下：
    //系统默认支持配置的选项
    {
    “window”: {
    “navigationBarBackgroundColor”: “#ffffff”,
    “navigationBarTextStyle”: “black”,
    “navigationBarTitleText”: “微信接口功能演示”,
    “backgroundColor”: “#eeeeee”,
    “backgroundTextStyle”: “light”,
    “usingComponents”: {//自定义的导航组件，需要注意全局的将会全局生效，，如果只是部分页面需要的话可以局部定制导航，这一点还是比较方便的
    “custom-nav”: “/components/custom-nav/custom-nav”
    }
    }
    }
    在这里插入图片描述

  2. 局部页面配置方式:如首页导航自定义（AIBoot\pages\index）,自动覆盖全局配置
    在对应的页面index.json 文件修改即可
    {
    “component”: true,
    “navigationStyle”: “custom”,
    “usingComponents”: {
    “navigation-bar”: “/custom-nav-bar” //可以放在任意目标
    }
    }
    在这里插入图片描述

页面中引用用即可

  <navigation-bar    canBack="{{false}}"      color-animation-duration="2000"  color-animation-timing-func="easeIn"    />

6.完整实现案列：
AIBoot\custom-nav-bar
index.js
```
const app = getApp();
Component({
// 接收父组件数据
properties: {
canBack: Boolean,
onytitle: Boolean,
title: String,
currentLang: {
type: String,
value: ‘auto’
},
currentTargetLang: {
type: String,
value: ‘zh’
},
},

    data: { 
        langList: app.globalData.lang, 
        editLang:false, 
        updateLang:"auto",
        updateTargetLang:"zh",
        statusBarHeight: app.globalData.statusBarHeight, //状态栏栏高度
        navBarHeight: app.globalData.navBarHeight, //导航栏高度
        navbarWidthStatus: app.globalData.navbarWidthStatus, //导航栏加状态栏高度
        menuRight: app.globalData.menuRight, //导航栏胶囊距离右侧距离
        menuHeight: app.globalData.menuHeight, //导航栏胶囊高度
        screenHeight: app.globalData.screenHeight, //可视区域高度  
        screenWidth: app.globalData.screenWidth , //可视区域高度  
    }, 
    methods: {
        lifetimes: {
            attached: function () {
                console.log("执行初始化 attached")
            },
            detached: function () { 
            },
        },
        // 读取语言数据
        getLangList(){ 
            const langData = wx.getStorageSync("langData")||app.globalData.langData;
            if(!langData){
                return false;
            }  
            this.setData({
                langData:langData,
            }); 
            return langData;
        },
        // 返回翻译
        back(e) {
            var that = this
            // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
            if (that.data.touchEndTime - that.data.touchStartTime < 350) { 
                var currentTime = e.timeStamp; // 当前点击的时间
                var lastTapTime = that.data.lastTapTime;
                // 更新最后一次点击时间
                that.data.lastTapTime = currentTime;
                // 如果两次点击时间在200毫秒内，则认为是双击事件
                if (currentTime - lastTapTime < 200) {
                    // 双击事件
                    clearTimeout(that.data.lastTapTimeoutFunc);
                    console.log("double click");
                    wx.redirectTo({
                        url: 'index'
                    })
                } else {
                    that.data.lastTapTimeoutFunc = setTimeout(function () {
                                // 单击事件
                        console.log("double click")
                        wx.redirectTo({
                        url: 'index'
                        })
                    }, 200);
                }
            }else{
                wx.navigateBack({
                 delta: 1,
                }); 
            }
        },
        // 是否操作语言
        selectLang(e) {  
            let langData = wx.getStorageSync("langData");
            const tThis=this;
            if(langData){
            langData = tThis.getLangList(); 
            tThis.setData({
                editLang:this.data.editLang?false:true,
                langData:langData
            }); 
            }else{
            // 异步请求并更新语言
            app.getLangConfig(function(){
                langData = tThis.getLangList();
                tThis.setData({
                editLang:tThis.data.editLang?false:true,
                langData:langData
                });
            });
            }  
        },  
        // 源语言改变
        fromIdxChange(e) {
            const dataset = e.target.dataset; 
            let changeLang = {};  
            if(dataset.langType=="fromIdx"){//源语言切换 
                changeLang.updateLang=dataset.index;
            }else{//目标语言切换 
                changeLang.updateTargetLang=dataset.index;
            }  
            this.setData(changeLang);
        },
        // 提交切换语言
        updateTranslateLang(){
            const updateLang = this.data.updateLang||"auto";
            const updateTargetLang = this.data.updateTargetLang||"en";
            if(updateLang==updateTargetLang){
                    wx.showToast({
                title: '源语言和目标语言不能一致',
                icon: 'error',
                duration: 2000
                })
            return false;
            }
            const newLang ={};
            //导航栏当前语言
            newLang['currentLang']=updateLang;
            newLang['currentTargetLang']=updateTargetLang;
            wx.setStorageSync("currentLang", updateLang); 
            wx.setStorageSync("currentTargetLang", updateTargetLang); 
            const updata = app.updateGlobalLang(updateLang,updateTargetLang); 
            app.globalData.currentLang=updateLang;// 
            app.globalData.currentTargetLang=updateTargetLang;//

            newLang.editLang=this.data.editLang?false:true;
            this.setData(newLang); 
            this.triggerEvent('callFun');//提交语言的父组件回调，具体看需求需不需要
        },
        // 撤销语言修改语言
        oldTranslateLang(){ 
            // app.showModalClose("未切换语言...",300);
            this.setData({editLang:this.data.editLang?false:true});
        } 
     }
})

```

//index.json
```
{
"component": true
}
```

//index.scss
```
  .text{
        color: rgba(255,255,255);
    }
    .page-title{
        text-align: center;
        width: 100%;
        line-height: 70px;
        font-size: 36rpx;  
        font-weight: bold;
        letter-spacing: 0rpx;
    }
    /* 顶部导航栏(  全局语言切换) */
    .tab-top{ 
        width: 100%; 
        display: flex;  
        .current-language-box{ 
        display: flex;
        flex-wrap: nowrap;
        align-items:center; 
        overflow: hidden; 
            .tab-lang-switch {
                margin-left: 50rpx; 
                .lang-text{    
                    font-size: 36rpx;
                    font-weight: bold;
                    letter-spacing: 0rpx;
                    text-align: left;
                    /* vertical-align: top;    */
                    /* word-break: keep-all; */
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .lang_switch{ 
                    display: inline-flex;
                    font-size: 24rpx;   
                    margin:  10rpx 40rpx;
                    /* transform: translateY(6rpx);  */
                    width: 32rpx;
                    height: 32rpx;
                    opacity: 1; 

                }
                .lang_switch.left-20{
                    margin-left: 20rpx;
                }
            }
    
            .btn-back{
            /* transform:scale(1.2) translateY(-5rpx); */
            width: 48rpx;
            height: 48rpx;
            opacity: 1;    
            margin:0 0  0  30rpx; 
            }  
            .text-active{
                color: #07c160;
            }
        }
    } 


    /* 全局语言切换容器 */
    .section-box-lang{ 
        width: 100%;
        background-color: #fff;
        border-top: 2rpx solid #f6f8fa; 
        position: fixed;
        align-items: center;
        box-sizing: border-box;
        display: none;
        z-index: 9999 ;
        &.edit-lang{ 
            display:block;
        } 
        .lang-flex-item{
            width: 100%;
            height: 100%;
            text-align: center;
            background-color: transparent;
            color: #000;
            position: relative;  
            opacity: 1; 
            /* border: 2rpx solid #f6f8fa; */
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .form-scroll{
            border-right: 2rpx solid #f6f8fa;
        } 
        .scroll-box{  
            /* var(--point-final-height) */
            overflow-y: auto; 
            /* flex-direction: row; */
        }
        .lang-box{
            display: inline-block;
            height: 100%;
            overflow-y: auto;
            width: 50%;
            box-sizing: border-box;
            padding: 0 30rpx;
            vertical-align: top;
            /* flex-direction: column;
            flex:1; */
            .lang-item{
                width: 314rpx;
                /* width: 100%; */
                display: inline-block;
                height: 70rpx;
                line-height: 70rpx;
                border-radius: 8rpx; 
                font-size: 32rpx;
                font-weight: normal;
                letter-spacing: 0rpx;
                color: #000;
                text-align: center;
                vertical-align: top;
                background: #fff;
                border:0 solid  transparent;
                outline: none;
                outline-style: none;
                box-shadow: none;
                background-color: #fff;
                -webkit-tap-highlight-color: transparent;
                &:first-child{
                    margin-top: 32rpx;
                }
                .selected{
                    background: linear-gradient(135deg, #07c160 0%, #07c160 100%);
                    color: #fff;
                    font-weight: bold;
                }
            }
        } 
        

    /* 语言切换的操作按钮 */
    .bootom-action{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 110rpx;
        line-height: 110rpx; 
        align-items: center;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(135deg, #f9f9fa 0%, #f9f9fa 100%);
        border-bottom-left-radius: 20rpx;
        border-bottom-right-radius: 20rpx;
        z-index: 300;
        .lang-action-btn{
            display: flex;
            flex: 1; 
            justify-content: center;
            font-size: 34rpx;
            font-weight: bold;
            letter-spacing: 0rpx; 
            color: rgba(255, 255, 255, 1);
            &.selected{
                background:#2474FF;
                box-sizing: border-box;
                border-bottom-right-radius: 20rpx; 
                /* background: linear-gradient(135deg, #07c160 0%, #07c160 100%); */
            }
        }
    }
    
    }    
    

    
```

//index.wxml
```
<!-- 状态栏空出来状态栏高度，官方API提供接口 -->
<view style="height: {{statusBarHeight}}px;width:100%;"></view>
<!-- 语言切换容器 -->
<view class="tab-bar tabbar tab-top"  >
    <view class="current-language-box " 
    style="height:{{(navBarHeight)}}px;display: flex;width:{{menuLeftwidth}}px;">  
        <block wx:if="{{canBack || onytitle}}">  
                <image   image  class="btn-back" bindtap="back"  src="/images/backnav.png" mode="aspectFill" lazy-load="false"></image>
                
        </block>   
        <!-- 只显示标题的特殊处理，其他的全部显示 -->
        <block wx:if="{{onytitle}}">   
        <view class="nav-page-title" style="display: flex;width:{{menuLeftwidth-50}}px;" >
            <text  class="page-title" > {{title}}</text></view>
        </block>    
        <block wx:else>  
        
        <view   style="height:{{(navBarHeight)}}px;line-height:{{(navBarHeight)}}px;    class="tab-lang-switch"    bindtap="selectLang">
            <text class="lang-text text-active">{{langData[currentLang]}}</text>
            <image class="lang_switch" mode="aspectFill" src="/images/icon/switch.png"></image> 
            <text  class="lang-text text-active">{{langData[currentTargetLang]}}</text>
            <image class="lang_switch"   mode="aspectFill" src="{{editLang?'/images/icon/up.png':'/images/icon/down.png'}}"></image> 
        </view>
        </block>   
    </view>
</view>

<!-- 语言容器 --> 
<view class="section-box-lang {{editLang?'edit-lang':''}}"  style="height: {{screenHeight}}px;">     
    <!-- 源语言 -->
    <view  class="lang-flex-item "  > 
        <view class="scroll-box" style="height:{{screenHeight-navbarWidthStatus}}px;" type="list"	scroll-y="true" >
            <view class="lang-box form-scroll">
                <text   class="lang-item {{updateLang==idx?'selected':''}}" 
                        bind:tap="fromIdxChange"  wx:for-index="idx"    wx:for="{{langData}}" wx:key="*this"  data-lang-type="fromIdx"   data-index="{{idx}}">{{item}}</text>
            </view>
            <view class="lang-box">
                <text  type="button" bind:tap="fromIdxChange" class="lang-item {{updateTargetLang==idx?'selected':''}}"  wx:for-index="idx" 
                wx:for="{{langData}}"  wx:key="*this" data-lang-type="toIdx"  data-index="{{idx}}" > 
                {{item}}</text>
            </view>
        </view>
            <view class="bootom-action" >
                <button class="lang-action-btn" data-action="0"  bind:tap="updateTranslateLang">取消选择</button>
                <button class="lang-action-btn selected"  data-action="1"  bind:tap="updateTranslateLang">确认语言</button>
            </view> 
    </view>    
</view> 
```

// 常用的全局系统信息函数，需要处理安卓ISO兼容问题需要考虑额外的刘海屏和底部安全区

const systemInfo = wx.getSystemInfoSync();
if (systemInfo.platform === 'android' || systemInfo.platform === 'ios') {
    this.globalData.isMobile=true;
} else if (systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {
} else {
}
// 胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
const menuButtonToStatus = (menuButtonInfo.top - systemInfo.statusBarHeight/2); 
this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height+10;
this.globalData.navbarWidthStatus = this.globalData.navBarHeight+systemInfo.statusBarHeight;
this.globalData.statusBarHeight = systemInfo.statusBarHeight;
this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
this.globalData.menuLeftwidth = menuButtonInfo.left;
this.globalData.screenWidth = systemInfo.screenWidth;
this.globalData.screenHeight = systemInfo.screenHeight-this.globalData.navbarWidthStatus;
manixchenyang
关注
  • 24
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序自定义导航
weixin_43893844的博客
07-14 278
微信小程序自定义导航栏
小程序自定义底部圆形凸起导航栏
2301_80934911的博客
01-26 589
需要在pages中开启自定义导航才能使用。凸起的圆形需要自己根据你的需求去修改。在需要使用的页面引用一下可以了。在min.js中注册使用。
微信小程序实现原生导航栏和自定义头部导航栏
热门推荐
花铛
10-28 1万+
因为不同的手机型号头部导航栏高度可能不一致，所以为了适配更多型号，需要动态计算导航栏的高度。状态栏的高度可以通过获取。胶囊按钮的信息可以通过获取。所以导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2。由于胶囊按钮是原生组件，为表现一致，其单位在各个系统都为 px，所以自定义导航栏高度的单位都必须是 px，才能完美适配。
微信小程序实现自定导航栏（适合多种机型）
weixin_45172119的博客
09-12 890
微信小程序实现自定导航栏 我们在开发小程序的时候，有时候会遇到需要自定义导航栏的需求，这样我们就要开始全局属性的自定义属性 我们需要在全局app.json开启自定义 开启全局之后，界面只保留状态栏和胶囊，同时原来的界面会发生影响，直接置顶了。 所以我们需要自定义一个nav组件（名字随机取）, 接着对nav组件进行界面布局， 我这边是我个人的业务代码，可以根据自己的业务需求进行布局， nav.wxml <view style="height:{{navHeight}}px;background
微信小程序自定义导航栏
hellow_tommer的博客
10-16 3875
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 如果自定义一个微信的导航栏 提示：以下是本篇文章正文内容，下面案例可供参考 一、制作微信小程序导航栏 第一: 关闭导航栏，如果是单页面需要就写在对应页面的json内，如果全局需要就写在app.josn内。 { "usingComponents": { }, "navigationStyle":..
基于微信小程序的校园导航小程序设计与实现
qq_15801219的博客
01-26 1249
今天带来的是基于SpringBoot的校园导航微信小程序设计与实现，智能化的管理方式可以大幅降低学校的运营人员成本，实现了校园导航的标准化、制度化、程序化的管理，有效地防止了校园导航的随意管理，提高了信息的处理速度和精确度，能够及时、准确地查询和修正建筑速看等信息。课题主要采用微信小程序、SpringBoot架构技术，前端以小程序页面呈现给学生，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生信息、校园简介、建筑速看、系统信息等功能。
微信小程序-页面配置-顶部导航栏背景色渐变
11-29
本主题主要聚焦于“微信小程序-页面配置-顶部导航栏背景色渐变”，旨在实现自定义tabBar页面的顶部导航栏，同时确保该导航栏与其它tabBar页面的导航栏风格保持一致，特别是导航栏标题的文字排版。 微信小程序提供了...
微信小程序 自定义头部导航栏 navigationStyle
12-24
1. **样式设置**：利用CSS（微信小程序中的wxss）来定义导航栏的颜色、高度、背景、边框等。例如，可以使用`background-color`设置背景色，`color`设置文字颜色，`font-size`调整字体大小。 2. **按钮自定义**：若...
微信小程序实现横向滚动导航栏效果
10-15
在微信小程序开发中，创建一个横向滚动的导航栏是一个常见的需求，这有助于提供更好的用户体验，尤其是在内容分类较多的情况下。本文将详细介绍如何实现这一效果，并通过具体的代码实例进行讲解。 首先，我们来看...
微信小程序icon图标素材PNG1500个
06-10
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的、无需下载安装即可使用的应用体验。在这个“微信小程序icon图标素材PNG1500个”的压缩包中，包含了丰富的图标资源，适用...
智慧医院智能导诊系统源码，智慧导诊小程序源码，采用前端框架：Uniapp+后端框架：springboot+移动端：微信小程序、H5自主研发
baina666的博客
07-16 1159
智慧导诊系统是一种基于人工智能和大数据技术的医疗辅助系统，旨在提高患者的就医效率和医院的管理效率。以下是对智慧导诊系统的详细解析：定义与功能智慧导诊系统通过自然语言处理、机器学习等技术，自动分析患者的病情及伴随症状，并根据疾病类型和症状推荐合适的科室和医生，为患者提供精准的分诊服务。该系统能够帮助患者快速了解医院信息、科室布局、医生排班等情况，从而提高就医效率。
微信小程序 vant-weapp的 SwipeCell 滑动单元格 van-swipe-cell 滑动单元格不显示 和 样式问题 滑动后删除样式不显示
weixin_44166849的博客
07-17 421
微信小程序 vant-weapp的 SwipeCell 滑动单元格 van-swipe-cell 滑动单元格不显示 和 样式问题 滑动后删除样式不显示
Tracy 小笔记：微信小程序 mpx 雷达图的实现
weixin_48702807的博客
07-20 115
微信小程序 mpx 雷达图的实现
微信小程序canvas 使用案例（一）
最新发布
天马3798
07-20 162
微信小程序canvas 使用案例，cavans 对象获取、上线文创建
微信小程序
2301_80063528的博客
07-19 543
一、使用CSS变量定制vant主题样式 二、API Promise化
微信小程序数组绑定使用案例（一）
天马3798
07-20 225
重点解读：可以使用js对象路径方式，修改变量并重新绘制页面。微信小程序数组绑定案例，修改数组中的值。
微信小程序去除顶部导航栏
07-28
要去除微信小程序的顶部导航栏，可以按照以下步骤进行操作。首先，在app.json配置文件中设置页面的导航栏样式为custom，即"navigationStyle": "custom"。这样可以自定义导航栏，只保留右上角的胶囊状按钮。请注意，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值