当前位置 博文首页 > RunningOnMyWay的博客:flex布局二 更简单实现移动端topbar

    RunningOnMyWay的博客:flex布局二 更简单实现移动端topbar

    作者:[db:作者] 时间:2021-06-10 09:13

    左边返回按钮、中部标题、最右侧搜索
    示例:
    在这里插入图片描述

    css样式如下:

    .topbar{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      width: calc(100% - 10px);
      left: 0;
      top:0;
      z-index: 999;
      height: 45px;
      padding: 0 5px;
      background-color: #fff;
      box-shadow: 1px 1px 1px #ddd;
    }
    .topbar-title{
      color: #27342B;
      font-weight: 600;
    }
    .topbar-back:active{
      opacity: 0.7;
    }
    

    以下以微信小程序为例,当然也可以自行改为HTML5代码

    <view class="topbar">
      <view class="topbar-back" bindtap="goBack">返回</view>
      <view class="topbar-title">管理端</view>
      <view class="topbar-right">搜索</view>
    </view>
    
    下一篇:没有了