uni-app 自定义导航菜单结合轮播滑动变色

作者 : 枫瑞博客 本文共2147个字,预计阅读时间需要6分钟 发布时间: 2019-08-5 共3.68K人阅读

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端,uni-app同时也是更好的小程序开发框架。相比下使用uni-app去开发app质量相对于mui来说会好太多。在某项目中有一个导航栏有选择城市以及收索框,很明显这是能使用自定义菜单了,菜单下方是轮播图。初始菜单是透明的,往下滑动的时候菜单会由透明变成蓝色。看下某项目效果图:

uni-app 自定义导航菜单结合轮播滑动变色

 

 

那么我们来说下如何实现这骚操作:

1.首先建立一个新的项目名称随意

uni-app 自定义导航菜单结合轮播滑动变色

 

2.配置界面

在pages.json文件下删除自带的原生导航

{
        "path" : "pages/lq-index/lq-index",
	"style" : {}
		}

在文件下面一点得找到navigationStyle值改为custom

 "globalStyle" : {
        "navigationStyle" : "custom",
        "navigationBarTextStyle" : "black",
        "navigationBarTitleText" : "uni-app",
        "navigationBarBackgroundColor" : "#FFFFFF",
        "backgroundColor" : "#FFFFFF"
    },

(额外知识点,原生导航给关闭后在其他界面想开启怎么办?在page,style中在开启即可)

{
		    "path" : "pages/lq-eserve/lq-eserve",
		    "style" : {
				"navigationStyle" :"default",
		        "navigationBarTitleText" : "在线预定",
				"navigationBarBackgroundColor":"#30A2FC",
				"navigationBarTextStyle":"white"
		    }
		}

 

复制官方dome中的common目录到自己项目

随后在app.vue中引导样式文件,好像新建工程没有引入uni.css

<style lang="scss">
	@import url("common/uni.css");
	/*每个页面公共css */
</style>

3.引入菜单

在官方演示dome中可以找到插件(/pages/extUI/nav-bar/nav-bar)

复制官方dome的components目录下uni-nav-bar.vue,uni-status-bar以及uni-icon.vue文件到自己项目中的components目录(没有的话就新建)

引入组件(直接全部复制/pages/extUI/nav-bar/nav-bar)到首页里面,如果报错一般都是路径问题在家在重新配置下

 

4.滑动颜色渐变

首先固定菜单栏在顶部,在uni-nav-bar这行中fixed值修改为false,即可固定在顶部,便添加一个样式文件:style=”navbg”

<!-- 自定义菜单 -->
		<uni-nav-bar  color="#333333" background-color="rgba(255, 255, 255, 0);" fixed="true" right-icon="scan" @click-left="showCity"
		 @click-right="scan" :style="navbg">
			<block slot="left">
				<view class="city">
					<text>{{city}}</text>
					<uni-icon type="arrowdown" color="#333333" size="22"></uni-icon>
				</view>
			</block>
			<view class="input-view">
				<uni-icon type="search" size="22" color="#666666"></uni-icon>
				<input confirm-type="search" @confirm="confirm" class="input" type="text" placeholder="输入搜索关键词" />
			</view>
		</uni-nav-bar>

return中添加

navbg:{
					background:'#ffffff00',
				}

以及添加是事件,得在 data()外面

//事件监听滚动条
		mounted() {
		  window.addEventListener('scroll', this.handleScroll)
		},

methods:

//获取导航到顶部的距离
			handleScroll() {				
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				// console.log(scrollTop)
				if(scrollTop <= 150){
					this.navbg.background = "#ffffff00"
				}else{
					this.navbg.background = "#30A2FC",
					this.navbg.color = "#fff"
					
				}
			},

 

相关源码下载:

链接: https://pan.baidu.com/s/1TNHDP08BKKGwkkMMmUw36g 提取码: 27cv

 

 

 

 

 

枫瑞博客网 一个只想努力找富婆不想努力的人
枫瑞博客网 » uni-app 自定义导航菜单结合轮播滑动变色

常见问题FAQ

枫瑞你想努力吗?
不 ,我只想找富婆

0 评论

发表评论