uniapp：uniapp修改图标，去掉原生导航，自定义导航，导航不跟着页面走。

一、uniapp修改图标

1.改前
改前
2.加入代码
根目录index.html

<!DOCTYPE html>
<!-- <html lang="en"> -->
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- <link rel="icon" href="static/images/favicon.ico"> -->
	<link rel="icon" href="static/11document.png"> 
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>

    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
   <!-- <title></title> -->
   <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
	  <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

3.在同目录的manifest.json的Web配置添加index.html路径
图片
4.修改好代码，重新运行编译项目即生效
5.改后
改后

二、uniapp去掉原生导航

在根目录pages.json中选择不要原生导航的页面，加入代码：

"navigationStyle":"custom",// 去掉微信小程序顶部导航
				    "app-plus":{
					    "titleNView":false //去掉app+h5顶部导航
				}

图片

三、uniapp自定义导航，导航不跟着页面走

1.uniapp自定义导航

示例：

<template>
	<view>
		<!-- customizeNavigation自定义导航 -->
		<view class="v-nav1">
			<view>
				<image src="../../static/c1.png" class="img-sm"></image>
			</view>
			<view>
				自定义导航1
			</view>
			<view>
				<image src="../../static/c2.png" class="img-sm"></image>
			</view>
		</view>
		<view class="v-nav2">
			<view class="v-nav2-1">
				<image src="../../static/c3.png" class="img-sm"></image>
				自定义导航2
			</view>
			<view>
				<image src="../../static/c4.png" class="img-sm"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.img-sm{
	width: 20px;
	height: 20px;
}
.v-nav1{
	display: flex;
	    justify-content: space-between;
	    padding: 5%;
	    background-color: #fad8d6;
}
.v-nav2{
	display: flex;
	    justify-content: space-between;
	    padding: 5%;
	    background-color: #d4e4ff;
}
.v-nav2-1{
	display: flex;
}
</style>

运行：
图片

2.uniapp导航不跟着页面走

（1）原
图片

（2）方法1：在导航的样式中加入：
position: fixed;
    width: 90%;
    top: 0;

展示：
图片

（3）方法2：监听

代码：

<template>
	<view>
		<!-- customizeNavigation自定义导航 -->
		<view class="v-nav1" :class="[(isFixedTop) ? 'fixedTop' : '']" id="box">
			<view>
				<image src="../../static/c1.png" class="img-sm"></image>
			</view>
			<view>
				自定义导航1
			</view>
			<view>
				<image src="../../static/c2.png" class="img-sm"></image>
			</view>
		</view>
		<!-- <view class="v-nav2">
			<view class="v-nav2-1">
				<image src="../../static/c3.png" class="img-sm"></image>
				自定义导航2
			</view>
			<view>
				<image src="../../static/c4.png" class="img-sm"></image>
			</view>
		</view> -->
		<view>
			<view v-for="item in 100">第{{item}}个数字</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFixedTop:false,
			}
		},
		onLoad(){
			uni.pageScrollTo({
				scrollTop:0,
				duration:0
			})
			setTimeout(()=>{
				this.GetTop()
				// this.aaa()
			},1000)
		},
		//监测页面滑动
		onPageScroll(e) {
			if(e.scrollTop > this.Topdistance){
				this.isFixedTop = true
			}else{
				this.isFixedTop = false
			}
		},
		methods: {
			GetTop(){
				// 获取元素距离顶部的距离
				var _this=this
				uni.getSystemInfo({
					success:(resu)=>{
						const query = uni.createSelectorQuery()
						query.select('#box').boundingClientRect()
						query.selectViewport().scrollOffset()
						query.exec(function(res){
							_this.Topdistance=res[0].top
							
						})
					},
					fail:(res)=>{}
				})
			},
		}
	}
</script>

<style>
.img-sm{
	width: 20px;
	height: 20px;
}
.v-nav1{
	display: flex;
	    justify-content: space-between;
	    padding: 5%;
	    background-color: #fad8d6;
		/* 导航不动
		position: fixed;
		    width: 90%;
		    top: 0; */
}
.v-nav2{
	display: flex;
	    justify-content: space-between;
	    padding: 5%;
	    background-color: #d4e4ff;
}
.v-nav2-1{
	display: flex;
}
.fixedTop{
	position: fixed;
	width:100%;
	top:0;
	left: 0;
	z-index: 999;
}

</style>

主要代码：
1》

:class="[(isFixedTop) ? 'fixedTop' : '']" id="box"

图片
2》script：

<script>
	export default {
		data() {
			return {
				isFixedTop:false,
			}
		},
		onLoad(){
			uni.pageScrollTo({
				scrollTop:0,
				duration:0
			})
			setTimeout(()=>{
				this.GetTop()
				// this.aaa()
			},1000)
		},
		//监测页面滑动
		onPageScroll(e) {
			if(e.scrollTop > this.Topdistance){
				this.isFixedTop = true
			}else{
				this.isFixedTop = false
			}
		},
		methods: {
			GetTop(){
				// 获取元素距离顶部的距离
				var _this=this
				uni.getSystemInfo({
					success:(resu)=>{
						const query = uni.createSelectorQuery()
						query.select('#box').boundingClientRect()
						query.selectViewport().scrollOffset()
						query.exec(function(res){
							_this.Topdistance=res[0].top
							
						})
					},
					fail:(res)=>{}
				})
			},
		}
	}
</script>

3》style：

.fixedTop{
	position: fixed;
	width:100%;
	top:0;
	left: 0;
	z-index: 999;
}

展示：
图片

（4）注意：如果需要，可以在导航的样式代码中加z-index
没加：

图片

添加：z-index:1

图片

# uni-app # javascript # css # 前端 # css3
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

MySQL 给用户添加 ALTER VIEW 的权限

avatar 华为云开发者联盟
cover

openGemini v1.2.0版本正式发布，IoT 场景性能大幅提升！

avatar 华为云开发者联盟
cover

openGauss 内存问题常用定位方法

avatar 华为云开发者联盟