uni导航栏背景点击之后变色
时间: 2023-06-27 10:01:14 浏览: 55
可以通过以下步骤来实现 uni-app 导航栏背景点击后变色:
1. 在 App.vue 中设置导航栏的背景颜色和点击后的背景颜色:
```css
<template>
<view class="container">
<view class="nav-bar" :style="{ backgroundColor: navBarColor }">
<text class="title">导航栏</text>
</view>
<view class="content">
<router-view />
</view>
</view>
</template>
<style>
.nav-bar {
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
}
.title {
font-size: 32rpx;
color: #ffffff;
}
.nav-bar.active {
background-color: #ff0000;
}
</style>
<script>
export default {
data() {
return {
navBarColor: "#007aff"
};
},
methods: {
handleNavBarClick() {
this.navBarColor = "#ff0000";
}
}
};
</script>
```
2. 在导航栏的容器视图上绑定点击事件:
```css
<view class="nav-bar" :style="{ backgroundColor: navBarColor }" @click="handleNavBarClick">
```
3. 在点击事件处理方法中修改导航栏的背景颜色:
```css
handleNavBarClick() {
this.navBarColor = "#ff0000";
}
```
4. 添加一个 `.active` 类来定义点击后的样式:
```css
.nav-bar.active {
background-color: #ff0000;
}
```
这样,在导航栏上点击一下后,背景颜色就会变成红色。