小程序自定义顶部组件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>
相关推荐
浩星11 小时前
uniapp运行鸿蒙报错整理
uni-app
游戏开发爱好者812 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang13 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金15 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq15 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷15 小时前
微信小程序全局数据共享
微信小程序·小程序
阿眠17 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184120 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
初出茅庐的1 天前
uniapp - AI 聊天中的md组件
前端·vue.js·uni-app
于慨1 天前
uniapp用webview导入本地网页,ios端打开页面空白问题
uni-app