uniapp 吸顶mixin


 1. html

<u-navbar :is-back="true"
          back-icon-color="#ffffff"
          :title="titleName"
          :background="background"
          :border-bottom="false"
          title-color="#ffffff"
          id="navbar">
</u-navbar>
<view class="tabs" :style="{top: navbarHeight + 'px' }">
	悬浮吸顶html
</view>

 2.js

<script>
import navBarHieght from '@/common/utils/navBarHeight.js'
export default {
  mixins: [navBarHieght],
}  
</script>
 3. mixin
 /**
 * 顶部状态量 + 顶部导航栏高度获取
 */
 export default {
  data() {
    return {
      navbarHeight: Number
    }
  },
  onReady() {
    // #navbar为NavBar组件设置的id
    let info = uni.createSelectorQuery().select('#navbar')
    info
      .boundingClientRect((data) => {
        this.navbarHeight = data.height
      })
      .exec()
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值