小程序自定义导航如何实现的

Posted 2023-04-26 shuihanxiao

onLaunch() 
    // 展示本地存储能力
    const logs = wx.getStorageSync(\'logs\') || []
    logs.unshift(Date.now())
    wx.setStorageSync(\'logs\', logs)
    // 获取系统信息
    this.globalData.systemInfo = wx.getSystemInfoSync();
    // 获取状态栏高度
    this.globalData.statusBarHeight = this.globalData.systemInfo.statusBarHeight
    // 胶囊按钮位置信息
    this.globalData.menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 获取导航栏高度
    this.globalData.navBarHeight = this.globalData.menuButtonInfo.bottom + (this.globalData.menuButtonInfo.top - this.globalData.statusBarHeight)
,
globalData: 
    statusBarHeight: \'\',
    menuButtonInfo: ,
    navBarHeight:\'\',
    systemInfo:\'\'
  ,

导航栏高度为胶囊底部位置+（胶囊顶部位置-状态栏高度）

将导航栏封装成组件

navigation-bar.js

properties: 
    // 是否显示返回箭头
    showBackArrow: 
        type: Boolean,
        value: true
    ,
    // 是否自定义导航栏标题
    customTitle: 
        type: Boolean,
        value: false
    ,
    // 导航栏标题
    title: 
        type: String,
        value: \'weixin\'
    ,
    // 是否自定义返回方法
    customBack: 
        type: Boolean,
        value: false
    
,
data: 
    navBarHeight:getApp().globalData.navBarHeight,
    statusBarHeight:getApp().globalData.statusBarHeight,
    menuButtonInfo:getApp().globalData.menuButtonInfo
,
methods: 
    /**  点击返回按钮 */
    back() 
        if (this.data.customBack) 
            this.triggerEvent(\'back\')
         else 
            wx.navigateBack(
                delta: 0,
            )
        
    ,
    /** 点击导航栏标题事件 */
    clickTitle()
        this.triggerEvent(\'clickTitle\')
    ,

navigation-bar.wxml

<view class="nav-bar" style="height:navBarHeightpx;">
    <view style="height:statusBarHeightpx;"></view>
    <view style="height:navBarHeight-statusBarHeightpx;width:menuButtonInfo.leftpx;" class="nav-box">
        <view class="back-arrow" wx:if="showBackArrow">
            <van-icon name="arrow-left" color="#262626" size="40rpx" bindtap="back"></van-icon>
        </view>
        <view class="nav-title" style="width: showBackArrow?\'calc(100% - 40rpx)\':\'100%\';">
            <text wx:if="!customTitle" bindtap="clickTitle">title</text>
            <slot wx:if="customTitle"></slot>
        </view>
    </view>
</view>
<view style="height:navBarHeightpx;"></view>

navigation-bar.wxss

.nav-bar
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffffff;
    z-index: 1000000;


.nav-box
    padding: 0 20rpx;
    display: flex;
    align-items: center;


.back-arrow
    width: 60rpx;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 4rpx;


.nav-title
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 36rpx;
    color: #262626;
    font-weight: 600;

app.js

"window": 
        "navigationStyle": "custom"
    ,
    "usingComponents": 
        "navigation-bar":"/components/navigation-bar/navigation-bar",
    

.wxml

<navigation-bar title="打卡" customBack bind:back="backWorkPage"></navigation-bar>

 

小程序自定义底部导航缓存

1、可以使用小程序的storage本地存储功能，将用户在底部导航栏点击的内容存储在storage中，开发者可以在每次用户进入小程序时，获取storage中存储的信息，实现自定义底部导航缓存。
2、也可以使用小程序的session本地存储功能，将用户在底部导航栏点击的内容存储在session中，开发者可以在每次用户进入小程序时，获取session中存储的信息，实现自定义底部导航缓存。
3、可以使用小程序的openid，将用户在底部导航栏点击的内容存储在openid中，开发者可以在每次用户进入小程序时，获取openid中存储的信息，实现自定义底部导航缓存。
4、也可以使用小程序的云数据库，将用户在底部导航栏点击的内容存储在云数据库中，开发者可以在每次用户进入小程序时，获取云数据库中存储的信息，实现自定义底部导航缓存。 参考技术A 小程序自定义底部导航缓存是指在小程序中，可以自定义底部导航栏的缓存功能，这样可以让用户在进入小程序时，可以直接跳转到上次访问的页面，从而提升用户体验。为了实现这一功能，开发者可以使用小程序的API，在用户访问小程序的每一个页面时，将用户的访问路径保存到本地缓存中，当用户再次进入小程序时，可以直接跳转到最近访问的页面。 参考技术B 小程序的自定义底部导航可以使用本地缓存，当页面跳转时，保存小程序页面的相关信息到本地缓存，再加载相应的页面时，可以使用自定义底部导航时保存的信息进行页面展示优化。 参考技术C 可使用小程序原生的tabbar的时候就用原生的,由于原生的体验上会更好一些。固然,若是不得不用自定义导航的时候不如就好好设计一下。