更新记录

1.0.2（2024-07-17） 下载此版本

被全package.json的uni_modules依赖项

1.0.1（2024-07-17） 下载此版本

补全uni_modules依赖

1.0.0（2024-07-17） 下载此版本

新增

平台兼容性

hbxw-nav-bar组件

介绍

高度可自定义NavBar 可通过slot高度自定义NavBar slot:left自定义NavBar左边内容 slot:middle自定义NavBar中间内容 slot:right自定义NavBar左边内容

slot:content自定义NavBar整个区域内容

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view class="container">
        <hbxw-nav-bar 
      v-if="type === 'navbar0'" 
      title="页面标题0" 
      leftIconColor="#fff" 
      @leftClick="leftClick" 
      @rightClick="rightClick"
      :titleStyle="{color: 'white'}"
    />

    <hbxw-nav-bar
      v-if="type === 'navbar1'" 
      title="页面标题1" 
      leftIconColor="#fff" 
      @leftClick="leftClick" 
      @rightClick="rightClick"
      :titleStyle="{color: 'white'}"
      bgColor="red"
      :opacity="navOpacity"
    />

        <hbxw-nav-bar v-if="type === 'navbar2'" bgColor="red">
      <template v-slot:content>
        <view class="nav-bar-content">完全自定义navbar</view>
      </template>
    </hbxw-nav-bar>
    <view class="content">
      <button @click="toggleAction('navbar0')" class="toggle-btn" :class="{active: type === 'navbar0'}">navbar0</button>
      <button @click="toggleAction('navbar1')" class="toggle-btn" :class="{active: type === 'navbar1'}">navbar1</button>
      <button @click="toggleAction('navbar2')" class="toggle-btn" :class="{active: type === 'navbar2'}">navbar2</button>
    </view>
    </view>
</template>
navbar1
<script>
    export default {
        data() {
            return {
        type: 'navbar0',
        navOpacity: 0
            }
        },
    mounted() {

    },
    onPageScroll(e) {
      const { scrollTop } = e;
      const navOpacity = scrollTop / 100;
      this.navOpacity = navOpacity <= 1 ? navOpacity : 1;
    },
        methods: {
      leftClick(e) {
        console.log('---- leftClick -----:', e);
      },
      rightClick(e) {
        console.log('---- rightClick -----:', e);
      },
      toggleAction(type) {
        this.type = type;
      }
        }
    }
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    height: 1000px;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to bottom, green, white);
  }
  .nav-bar-content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title{
    padding:10rpx;
    font-size: 32rpx;
  }
  .toggle-btn{
    margin-top: 30rpx;
    &.active{
      background-color: red;
      color:#fff;
    }
  }
  .content{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }
  .bg-img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>

API

zIndexNumber

Props

Events