框架Tabs标签页实现背景自定义样式

张什么晨

已于 2022-07-14 14:17:05 修改

阅读量3.6k

点赞数 1

分类专栏： vue vant 文章标签： vue.js 前端前端框架

于 2022-07-10 18:36:14 首次发布

本文链接：https://blog.csdn.net/zlc516/article/details/125708978

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vant

2 篇文章 0 订阅

订阅专栏

先上效果图：

大概样子就这样，没有视频效果，大家凑合看

接下来上代码：

<div class="backColor"></div> // 自定义背景
<van-sticky offset-top="50">
<van-tabs
        title-inactive-color="#D8E5F9"
        title-active-color="#FFFFFF"
        background="rgba(165, 42, 42, 0)" // 背景设置为透明
        animated
        swipeable
        line-width="50%"
        line-height="3"
        color="#FFFFFF"
        v-model:active="active"
      >
        <van-tab
          :title="
            waitRoleType == '1' || roleType == '1'
              ? `我的待办(${waitTotal})`
              : `销售待办(${waitTotal})`
          "
        >
          <van-pull-refresh v-model="waitRefreshing" @refresh="onWaitRefresh">
            <van-list
              v-model:loading="waitLoading"
              :finished="waitFinished"
              finished-text="没有更多了"
              @load="onWaitLoad"
            >
              <div
                class="order-content"
                v-for="item in waitList"
                :key="item.orderNo"
              >
                <List :item="item" @onWaitLoad="onWaitLoad"></List>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab :title="`业务预警(${businessTotal})`">
          <van-pull-refresh v-model="businessRefreshing" @refresh="onRefresh">
            <van-list
              v-model:loading="businessLoading"
              :finished="businessFinished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div
                class="order-content"
                v-for="item in businessList"
                :key="item.orderNo"
              >
                <List :item="item"></List>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
</van-sticky>

Tab相关属性官网上都可以找到，我这里就不照搬了，只说一下实现背景自定义的思路吧。

其实就是把tabs背景色设置为透明色，再把需要的背景插入就OK了

// 这里插入背景图片，可以自定义宽高
.backColor { 
    position: absolute;// 改成固定定位，结合框架的吸顶功能，如果不需要吸顶可以不添加
    height: 143px;
    width: 100%;
    background: url(../assets/DBbj.png) no-repeat;
  }
// deep 的用法如果有不懂得，自行百度
  :deep(.van-sticky) {
    //position: relative;// 吸顶功能就不需要这两个属性了
    //top: -133px;
    .van-pull-refresh {
      overflow: auto;
    }
    .van-tabs__wrap {
      margin-bottom: 14px;
    }
    .van-list {
      height: 100vh;
      .order-content {
        border-radius: 7px;
        margin: 0px 8px;
        background-color: #fff;
      }
    }
  }

关于这个背景自定义，目前我也是只用到了这一种方法，如果大家有其他的方法，期待大家分享留言