UniApp CSS 多端实现底部导航凸起样式

有问题请咨询gpt2023-10-26 6:10

简介

底部导航栏是移动应用中非常常见的一个元素。有时，你可能希望其中的一个按钮凸出来以强调它，例如一个 "+" 按钮用于添加新内容。本文将介绍如何在 UniApp 中使用 CSS 来实现这一效果。

基础结构

HTML 结构示例：

html 复制代码

<view class="tabbar">
  <view class="tabbar-item">首页</view>
  <view class="tabbar-item">消息</view>
  <view class="tabbar-item tabbar-item-active">+</view>
  <view class="tabbar-item">我的</view>
</view>

CSS 实现

css 复制代码

/* 基础样式 */
.tabbar {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  z-index: 999;
}

.tabbar-item {
  flex: 1;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
}

/* 凸起样式 */
.tabbar-item-active {
  position: relative;
  top: -10px;
  font-size: 20px; /* 字体更大 */
  background-color: #f2f2f2; /* 背景色 */
  border-radius: 12px; /* 圆角 */
}

注意事项

由于这是一个多端应用，需要考虑不同端（如微信小程序、H5、App等）的表现形式是否一致。
在 iOS 设备中，底部有一个 Home Bar，确保你的底部导航栏不会与其重叠。

总结

通过使用 UniApp 和 CSS，你可以轻松实现多端底部导航栏凸起的样式。此实现方式简单而高效，能在多种场景中使用。