小程序自定义顶部组件uniapp

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>
相关推荐
Jing_jing_X5 分钟前
微信小程序开发踩坑记:从AI工具翻车到找到合适方案
人工智能·ai·小程序·产品运营·个人开发
一匹电信狗1 小时前
【MySQL】数据库的相关操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
weixin_lynhgworld6 小时前
旧物新生,从二手回收小程序开启绿色生活
小程序·生活·旧物回收
從南走到北7 小时前
智尚招聘求职小程序v1.0.23
微信小程序·小程序
2501_9159184111 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手12 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_9159090614 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
狂团商城小师妹14 小时前
智尚房产中介小程序
微信小程序·小程序
赵庆明老师15 小时前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj16 小时前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app