uniapp 固定顶部元素

前言

如果普通的方式固定住，刷新页面动作(下拉页面)会在顶部出现空白块。

有时候，我们需要将一个元素 “牢固” 定在一个位置，无论页面怎么上拉下滑，都不会偏移或露出顶部安全距离。

步骤 （一）给当前容器加上以下 css 代码即可。

    view {
    	position: fixed;
    	left: 0;
    	right: 0;
    	top: 0;
    }

具体例子

<template>
	<view>
		<view class="search-view">
			<view>顶部数据</view>
		</view>

        <view>同级别的其他元素111</view>
        <view>同级别的其他元素222</view>
        <view>同级别的其他元素333</view>
     </view>
</template>


<style lang="scss" scoped>

.search-view {
   background-color: #ffffff;
   /* 固定在顶部的元素样式 */
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
}
</style>

得到的效果为

顶部数据 始终在顶部
但是 同级别的其他元素111 会因为 顶部数据 的css元素 position: fixed 脱离文档流(不再占据页面上的空间)
而向上填补位置，导致 同级别的其他元素111 被遮住了

步骤 （二）解决脱离文档流后的占用空间丢失

方式一：占位法（直接加一个百分比高度的元素）

<template>
	<view>
		<view class="search-view">
			<view>顶部数据</view>
		</view>

        <view style="height: 15vh">占着位置的元素</view>

        <view>同级别的其他元素111</view>
        <view>同级别的其他元素222</view>
        <view>同级别的其他元素333</view>
     </view>
</template>

虽然使用了vh 单位 但是使用某些机型的尺寸还是没有兼容到位（F12调试）
如果不考虑多种兼容性问题，该方式已经满足。

如果考虑多种兼容性问题，就需要实现动态设置高度操作

方式二：占位法（加一个动态设置高度的元素）

<template>
	<view>
		<view class="search-view">
			<view>顶部数据</view>
		</view>

        <view class="space-holder" :style="{ height: fixedElementHeight + 'px' }">
        占着位置的元素
        </view>

        <view>同级别的其他元素111</view>
        <view>同级别的其他元素222</view>
        <view>同级别的其他元素333</view>
     </view>
</template>

<script>
	export default {
		name: 'xxx',
		components: {
		},
		props: {
		},
		data() {
			return {
				fixedElementHeight: 50,
			}
		},
		mounted: function() {
			var _this = this;
			var _that = this;
			this.getDomConfig();
		},
		methods: {
			getDomConfig() {
			      //等DOM 更新完成后才会执行
				 this.$nextTick(() => {  
				 let that = this
				 //捕获“顶部数据”的高度
				 let info = uni.createSelectorQuery().select(".search-view");
				 info.boundingClientRect(function(data) { //data - 各种参数
				    //console.log(data) // 获取元素的相关信息
					that.fixedElementHeight=data.height
				 }).exec() 
				  }); 
			},
		
	}
</script>

<style lang="scss" scoped>

.search-view {
   background-color: #ffffff;
   /* 固定在顶部的元素样式 */
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
}

.space-holder {
  /* 不可见元素样式，用于保留空间 */
   visibility: hidden;
}
</style>