globalData对页面跳转时导航栏样式变化的用处

北秋丶
628 阅读5分钟

前言

最近在仿网易云音乐中碰到许多有趣的地方，今天想跟大家分享一个关于页面切换时导航栏字体样式改变的话题。平常很多小程序都是使用tabBar去解决页面切换时对应的页面名称的样式，十分的便利；但是我们今天所用到的界面导航并非在底部，而是在手机屏幕头部的导航栏。将去使用globalData这个全局数据来对导航栏点击页面切换的同时进行样式的改变。

效果图分析

这里我们先来看看我们最终想要实现的效果

简述

导航栏是这四个界面都需要使用到的，这里我们创建一个组件，将组件分别引入这四个界面的wxml中去使用(这里我们不去详细讲使用组件，有兴趣的小伙伴可以去度娘或者去Vant上学习一下)；我们先将导航栏的wxml、wcss和js发出来(这里只实现了导航栏的界面和跳转功能；提示：在component中创建组件为nav-bar，会有对应的wxml,wxss,js,json四个文件；再到pages中创建四个对应的界面，并分别在wxml中引入<nav-bar></nav-bar>;在json中的usingComponents引入 "nav-bar": "/component/nav-bar/nav-bar"(路径根据自己的来))

wxml

<!-- nav-bar.wxml -->
<view>
	<!-- 弥补nav-bar的高度 -->
	<view style="height:{{topHeight}}px"></view>
	<view class="container">
		<!-- 手机头部显示点亮栏 -->
		<view style="{{statusBarStyle}}"></view>
		<view class="nav-bar" style="{{navBarStyle}}">
			<view class="nav">
				<view class="nav-back" bindtap="back">
					<image class="nav-img back__img" src="../../image/nav_back.png" />
				</view>
				<view class="nav-change">
					<view class="nav-text nav-mine">
						<navigator url="../../pages/mine/mine">我的</navigator>
					</view>
					<view class="nav-text nav-find">
						<navigator url="../../pages/find/find">发现</navigator>
					</view>
					<view class="nav-text nav-cloud">
						<navigator url="../../pages/cloud/cloud">云村</navigator>
					</view>
					<view class="nav-text nav-video">
						<navigator url="../../pages/video/video">视频</navigator>
					</view>
				</view>
				<view class="nav-serach">
					<navigator url="../../pages/search/search">
						<image class="nav-img serach__img" src="../../image/nav_seach.png"></image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</view>

wxss

  position: fixed;
  top: 0;
  width: 100%;
  z-index:99;
}
.nav-img {
  width: 45rpx;
  height: 45rpx;
}
.nav-change{
  display: flex;
  margin: 0 40rpx;
}
.nav{
  position: fixed;
  top: 0;
  z-index: 100;
  display: flex;
  margin: 63rpx 0 10rpx 0;
  color:rgb(159,159,159);
}
.nav-text{
  margin: 0 16rpx;
}
.mineActive {
  color:white;
  font-weight: 550;
  font-size: 36rpx;
  margin-top: -4rpx;
}

js

const app =  getApp();
Component({
  properties: {
    title: {
      type: String,
      value: ''
    },
    statusBarColor: {
      type: String,
      value: '#fff'
    },
    navBarColor: {
      type: String,
      value: '#fff'
    },
    titleColor: {
      type: String,
      value: '#000'
    }
  },
  data: {
    statusBarStyle: "",
    navBarStyle: "",
    topHeight: 50,
    change: true,
  },
  lifetimes: {
    attached: function () {
      this.setData({
        navId: app.globalData.navId
      })
      console.log(app.globalData.navId)
      let navBarStyle = `background-color:${this.data.navBarColor};
      height:${wx.db.navBarHeight}px;
      color:${this.data.titleColor};`
      let statusBarStyle = `background-color:${this.data.statusBarColor};
      height:${wx.db.statusBarHeight}px;`
      let topHeight = wx.db.navBarHeight + wx.db.statusBarHeight
      this.setData({
        navBarStyle,
        statusBarStyle,
        topHeight
      })
    },
  },
  methods: {
   back: function () {
      wx: wx.navigateBack({
        delta: 1
      })
    }
  }
})

分析

导航栏使用的navigator,小程序自带的页面跳转功能，每当点击'我的'，'发现'，'云村'，'视频'，在跳转去相应的页面时，文字的样式也要进行改变。可能说到看了这么多有人要打我了，简单的话可以用个hover-class；或者直接绑定一个点击事件，wxss中写上两个样式，点击前的样式为默认样式,点击后的样式为就为需要改变的样式。这里要说的是，点击事件是页面的点击事件，在该页面上有效的，当你在'发现'这个页面上时，点击去'云村界面上'，点击的那一刻字体样式改变了，但跳转成功后，样式又变回了原样；因为当点击进行页面跳转后相当于去了新的页面，可以比方为页面刷新，点击事件就失效了，样式自然变回了原。这里取局部代码展示：

wxml

<view class="nav-text nav-cloud"  bindtap="changeCloud" >
	<navigator class="{{styleSize ? 'active' : ''}}" url="../../pages/cloud/cloud">
    	云村
	</navigator>
</view>

js

data: {
	//  放原来的
    styleSize:false  //新增加
  },
  methods: {  //  在 methods 中新增 changeCloud
    changeCloud: function() {
      console.log('c')
      this.setData({
        styleSize: true
      })
    },
  }

wxss

//  在wxss中增加
.active {
color: #000;
font-weight: 550;
font-size: 36rpx;
margin-top: -4rpx;
}

图中可以看到，点击生效，字的样式也改变了，但是一跳转到新的界面，一切都失效了，所以这样的方法只适合在页面上使用，不适合在页面需要跳转中使用。那我们就应该取考虑跳转情况下如何让wxss继续保留呢？没错，使用全局数据，在全局上去使用点击事件。

解决办法：globalData

globalData简单介绍

globalData具有共享属性，在各个页面之间共同使用某些信息，对共享数据进行修改设置，以便于其他页面根据数据变化进行对应的调整，可以使用全局数据globalData

具体办法

我们将延续我们的点击事件以及样式的改变,同时，我们通过globalData去判断当前处于那个页面，并且在当前页面增加wxss样式。来看详细操作(下面操作后的实现效果图就是开头那个图)：

wxml

//  修改对应的4块点击事件处
<view class="nav-text nav-mine" bindtap="changeMine">
  <navigator class="{{navId == 1 ? 'mineActive' : ''}}" url="../../pages/mine/mine">
    我的
  </navigator>
</view>
<view class="nav-text nav-find" bindtap="changeFind">
  <navigator class="{{navId == 2 ? 'active' : ''}}" url="../../pages/find/find">
    发现
  </navigator>
</view>
<view class="nav-text nav-cloud" bindtap="changeCloud">
  <navigator class="{{navId == 3 ? 'active' : ''}}" url="../../pages/cloud/cloud">
    云村
  </navigator>
</view>
<view class="nav-text nav-video" bindtap="changeVideo">
  <navigator class="{{navId == 4 ? 'active' : ''}}" url="../../pages/video/video">
    视频
  </navigator>
</view>

wxss

//   新增两个页面跳转后要用到的样式
.mineActive {
  color:white;
  font-weight: 550;
  font-size: 36rpx;
  margin-top: -4rpx;
}
.active {
  color: #000;
  font-weight: 550;
  font-size: 36rpx;
  margin-top: -4rpx;
}

app.js

//  在app.js中的globalData中定义一个navId来代表为对应哪个界面
 globalData: {
    navId: 2  // 这里可以填空，我这里时默认第二个'发现'界面为首页
  }

js

data: { 
    navId: ""   //  在data中拿到全局变量中的navId来使用
  },
methods: {  // 在methods中去增加使用对应的4个点击事件
    changeMine: function() {
      app.globalData.navId = 1  
      //当changeMine生效时，对应的navId为1，即为'我的'界面时'mineActive'样式生效
    },
    changeFind: function() {
      app.globalData.navId = 2  
      //当changeFind生效时，对应的navId为2，即为'发现'界面时'active'样式生效
    },
    changeCloud: function() {
      app.globalData.navId = 3  
      //当changeCloud生效时，对应的navId为3，即为'云村'界面时'active'样式生效
    },
    changeVideo: function() {
      app.globalData.navId = 4  
      //当changeVideo生效时，对应的navId为4，即为'视频'界面时'active'样式生效
    }
  }

解析

当点击对应的导航栏标题时，页面进行跳转，同时点击事件生效(即changeMine changeFind changeCloud changeVideo四个点击事件)，当点击其中一个，会改变全局数据中(globalData)的navId为跳转后的当前页面的navId，此时在这一块内容中-->{{navId == 2 ? 'active' : ''}}会去判断是否处于对应的页面，是的话则增加active的新样式；即一点击标题文字的样式会发生改变，并且页面跳转后这个变体文字的样式仍然存在，不会刷新变回原样，达到最终想要的效果。

总结

对于简单的点击使得文本样式进行改变是一件很简单的事，对于在页面跳转中这样的效果要同时达到会有一定的困难，去认识到点击事件是有局限性的，全局观念很重要；同时我也会再去多认识认识globalData的其他妙用。（今天带给大家的分享只是一个小白对于一个小方面的新认识和探索；感谢大家的观赏，也期待大家的指点哦！）

avatar
文章
阅读
粉丝