小程序自定义顶部组件uniapp

初晨未凉2024-12-11 8:16

customNav.vue

javascript 复制代码

<template>

    <view>

        <view class="navbar-wrapper" :style="{

            paddingTop: statusBarHeight,

            paddingBottom: paddingBottom+'px',

            backgroundColor: `rgba(255,255,255,${topOpacity})`,

        }">

            <view :style="{height: titleHeight+'px',lineHeight:  titleHeight+'px',color: topOpacity > 0.9 ? '#000' : ''}">

               

                <view v-if="$slots.default">

                    <slot></slot>

                </view>

                <text v-else> {{ title }}</text>

            </view>

        </view>

        <view v-if="isBlockHeight" :style="{

            height: totalHeight+'px'

        }"></view>

    </view>

   

  </template>

   

  <script>

    export default {

      name: 'customNav',

      props: ['title','isBlockHeight'],

      data() {

        return {

          // 像素单位

          pxUnit: 'px',

          // 默认状态栏高度

          statusBarHeight: 'var(--status-bar-height)',

          // 微信小程序右上角的胶囊菜单宽度

          rightSafeArea: 0,

          titleHeight: 40,

          totalHeight: 0,

          topOpacity: 0,

          paddingBottom: 0

        }

      },

      mounted() {

        const px = this.pxUnit

        // #ifndef H5

        // 获取窗口信息

        const windowInfo = uni.getWindowInfo()

        this.statusBarHeight = windowInfo.statusBarHeight

        // #endif

         

        // #ifdef MP-WEIXIN

        // 获取胶囊左边界坐标

        const { left,top,height } = uni.getMenuButtonBoundingClientRect()

        const info = uni.getSystemInfoSync()

        this.statusBarHeight = top;

        this.titleHeight = height;

        // 计算胶囊(包括右边距)占据屏幕的总宽度：屏幕宽度-胶囊左边界坐标

        this.rightSafeArea = windowInfo.windowWidth - left + px

    this.paddingBottom = top-info.statusBarHeight;

        // #endif

        // #ifndef H5

        this.totalHeight = this.titleHeight + this.statusBarHeight + this.paddingBottom;

        // #endif

        // #ifdef H5

        this.totalHeight = this.titleHeight

        // #endif

        this.statusBarHeight = this.statusBarHeight+'px';

      },

      methods:{

        pageScroll(scrollTop){

            let topOpacity = scrollTop / this.totalHeight

            if (scrollTop < 10) {

                topOpacity = 0

            } else if (topOpacity >= 1) {

                topOpacity = 1

            }

            this.topOpacity = topOpacity;

        }

      }

    }

  </script>

   

  <style scoped>

    .navbar-wrapper {

      box-sizing: border-box;

      background-color: transparent;

      position: relative;

      font-size: 16px;

      font-weight: 700;

      color: #fff;

      text-align: center;

      position: fixed;

      top: 0;

      width: 100%;

      z-index: 10;

    }

  </style>

使用

javascript 复制代码

<template>

   <customNavBarVue ref="customNavRef" title="拾光机"></customNavBarVue>

</template>

<script>

let timer = null

export default {

    data() {

        return {}

    },

    onPageScroll(e){

        this.$refs.customNavRef.pageScroll(e.scrollTop)

    },

    methods: {}

</script>

<style lang="scss" scoped>

</style>