uniapp 自定义底部导航并适配+返回顶部效果_uni-nav-bar底部

样式

可以自己自定义顶部导航所有样式，包括凸起的效果

先在app.vue，判断全屏的机型

onLaunch: function() {
			//判断设备是否为 iPhone
			const self = this
			uni.getSystemInfo({
				success: function(res) {
					// 根据 model 进行判断
					let iphoneArr = ['iPhone X', 'iPhone XR','iPhone XS Max','iPhone 11','iPhone 11 Pro','iPhone 11 Pro Max']
					self.globalData.isIphone = iphoneArr.some(function(item){
						return item === res.model
					})
				}
			})
		},
		globalData: {
			isIphone:false
		},

首页代码

html段

<template>
	<view class="content">
		<!-- uni-nav-bar 自带组件  -->
		<uni-nav-bar :fixed="true" color="#000000" :status-bar="true" left-icon="arrowleft"
			left-text="返回" title="uni-nav-bar 标题" @clickLeft="back" class="header-nav"/>
		
		<!-- 中间内容区域 -->
		<scroll-view 
			scroll-y="true" 
			:style="{'height': contentHeight + 'px'}" 
			class="content-details" 
			@scroll="scroll"
			:scroll-top="scrollTop"
			>
			<!-- 对应按钮的内容展示 -->
			<one v-show="isShow == 1"></one>
			<two v-show="isShow == 2"></two>
			<three v-show="isShow == 3"></three>
			<four v-show="isShow == 4"></four>
			
			<!-- 返回顶部 -->
			<view 
				class="bottonTop" 
				:style="{'top': contentHeight - 20 + 'px','display':(topState===true? 'block':'none')}"
				@click="goBackTop">
				T
			</view>
		</scroll-view>
		
		<!-- 底部导航 -->
		<view class="footer-bar" :style="{'padding-bottom': isTrue ? '30rpx' : '0' }">
			<view class="footer-content" @click="nav(1)">
				<image src="/static/tu1.png" mode=""></image>
				<text>模式一</text>
			</view>
			<view class="footer-content" @click="nav(2)">
				<image src="/static/tu2.png" mode=""></image>
				<text>模式二</text>
			</view>
			<view class="footer-content" @click="nav(3)">
				<image src="/static/tu3.png" mode=""></image>
				<text>模式三</text>
			</view>
			<view class="footer-content" @click="nav(4)">
				<image src="/static/tu4.png" mode=""></image>
				<text>模式四</text>
			</view>
		</view>
	</view>
</template>

JS

<script>
	// 自己写的对应底部导航的页面
	import one from "../index/index.vue";
	import two from '../modelOne/modelOne.vue';
	import three from '../modelTwo/modelTwo.vue';
	import four from '../modelThree/modelThree.vue';
	
	export default {
		components: {
			one,two,three,four
		},
		data() {
			return {
				isTrue: false,
				contentHeight: '',
				isShow: 1,
				topState: false,
				scrollTop: 0,
			}
		},
		onLoad() {
			// 判断是否是全面屏
			this.isTrue = getApp().globalData.isIphone;
		},
		onReady() {
			// 计算屏幕剩余高度  填补剩余高度
			let _this = this;
			uni.getSystemInfo({
				success: function(res) {
					let obj = uni.createSelectorQuery().select('.footer-bar');
					obj.boundingClientRect(function(data) { // data - 各种参数
						_this.contentHeight = res.windowHeight - data.height;
					}).exec()
					let obj1 = uni.createSelectorQuery().select('.header-nav');
					obj1.boundingClientRect(function(data) { // data - 各种参数
						if(_this.isTrue){
							_this.contentHeight = _this.contentHeight - data.height - 24;
						}else{
							_this.contentHeight = _this.contentHeight - data.height
						}					
					}).exec()
				}
			});
		},
		methods: {
			// 底部导航切换
			nav(index) {
				this.isShow = index;
				this.topState = false;
				this.scrollTop = 0;
			},
			// 滚动事件
			scroll(e) {
				if(e.detail.scrollTop == 0) {
					this.topState = false;
				}else {
					this.topState = true;
				}
				this.scrollTop = e.detail.scrollTop;
			},
			// 返回顶部
			goBackTop() {
				this.scrollTop = 0;
				this.topState = false;
			}
		},
	}
</script>

css

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
 
	.content-details {
		width: 100%;
		position: relative;
	}
	
	.bottonTop{
		background: #FFFFFF;
		line-height: 48rpx;
		width: 48rpx;
		text-align: center;
		height: 48rpx;
		position: fixed;
		right: 20rpx;
	}
	
	.footer-bar {
		position: fixed;
		width: 100%;
		height: 112rpx;
		background: #fafafa;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
	}
 
	.footer-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
 
	.footer-content image {
		width: 48rpx;
		height: 48rpx;
	}
 
	.footer-content text {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #999;
	}
</style>