uniapp底部导航栏设置样式问题

Question

uniapp底部导航栏设置样式问题

uniapp底部导航栏怎么加上样式

例如：画了绿色圆圈的那个样式

Answer 1

在您的uniapp项目中，打开index.html文件，并找到style标签。这是用于包含页面样式表的标签。
在style标签中，找到view标签。这是用于包含页面布局的标签。
在view标签中，找到navbar类。这是用于设置底部导航栏样式的类。
在navbar类中，找到bottom属性。这是用于设置底部导航栏的位置。
在bottom属性中，您可以设置底部导航栏的样式，例如颜色、宽度、边框等。

<view class="container">  
  <view class="navbar">  
    <view class="logo"></view>  
    <view class="menu">  
      <view class="nav-links">  
        <view class="nav-item" :key="index"></view>  
        <view class="nav-item" :key="1">Home</view>  
        <view class="nav-item" :key="2">About</view>  
        <view class="nav-item" :key="3">Contact</view>  
      </view>  
      <view class="nav-item" :key="4">Services</view>  
    </view>  
  </view>  
</view>

.container {  
  height: 100%;  
}  
  
.navbar {  
  background-color: #333;  
  color: #fff;  
  padding: 10px;  
  border-radius: 5px;  
}  
  
.logo {  
  margin-top: 10px;  
}  
  
.menu {  
  margin-top: 20px;  
}  
  
.nav-links {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  margin-top: 10px;  
}  
  
.nav-item {  
  padding: 10px;  
  background-color: #fff;  
  color: #333;  
  border-radius: 5px;  
}  
  
.nav-item:hover {  
  background-color: #333;  
}  
  
.nav-item .icon {  
  font-size: 24px;  
}