微信小程序固定头部不动

微信小程序固定头部不动的步骤如下：

1、在小程序自带的方法onPageScroll中可以得到滑动距离顶部的距离，在data公共数据中定义scrollTop。

2、得到滑动距离后，当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位，因此为要在scroll-view中定义class="title{{scrollTop>30'topnav'：''}}"30就是我需要定义的模块距离顶部的距离，当超过这个距离就会执行css的topnav样式。

3、否则就执行愿有的css样式。

第一：先在App.vue中全局获取不同手机的顶部高度

在methods:{

getPhoneHeight(){

let that =this

uni.getSystemInfo({

success:function(res){

that.globalData.phoneHeight=res.statusBarHeight

}

})

}

}

第二步

在components中写公共组件

uni-topBar.vue

<template>

<view class="nav-box" style="margin-top:{{phoneHeight}}px">

<view class='nav-top-one'>

<image src='../static/images/tback.png' class="nav-top-left" @click="backpage"></image>

<view class="nav-top-center"></view>

<image src='../static/images/home.png' class="nav-top-right" @click="BackHome"></image>

</view>

<view class="nav-top-text">{{titleName.addredd}}</view>

</view>

</template>

<script>

// app中的全局需要在每个页面进行引入

import app from '../App.vue'

export default {

//

name: "uniNavBar",

// 接受父组件的传值，可以接受多个中 在父组件中用v-bind 来绑定

props: {

// 接受父组件的传值

titleName: {

type: Object

}

},

data() {

return {

phoneHeight:app.globalData.phoneHeight //这里在进行调用

}

},

// 事件

methods: {

backpage() {

uni.navigateBack({

delta: 1

})

},

BackHome(){

// 关闭当前页面

uni.switchTab({

url: '/pages/index/index'

})

}

},

// 生命周期

</script>

<style>

.nav-box {

position:relative

padding-left: 16rpx

background:#ffffff

height:76rpx

</style>

第三步：

在需要的页面进行引入 和vue引入公共组件的方法一样

html:

<uniNavBar :titleName="topData"></uniNavBar>

js:

import uniNavBar from "../../../components/uni-nav-bar.vue"

components:{

uniNavBar

},

最后效果显示

悟空—不死谢谢

---