Vue/Uniapp 中如何实现类似图片所示的日周月年切换标签效果？-css教程-PHP中文网

Vue/Uniapp 中如何实现类似图片所示的日周月年切换标签效果？

DDD

发布： 2024-11-06 11:24:07

原创

1204人浏览过

vue/uniapp 中如何实现类似图片所示的日周月年切换标签效果？

vue/uniapp中，如何实现类似图片中效果的日周月年切换标签？

图片中呈现了四个标签，选中"日"后，背景变成蓝色，字体变成白色。而其他未选中的标签，背景为灰色，字体也呈灰色。

一位网友通过纯html实现了一个简易的版本，代码如下：

<div class="tabs">
  <div class="tab active">日</div>
  <div class="tab">周</div>
  <div class="tab">月</div>
  <div class="tab">年</div>
</div>

登录后复制

具体效果，可以点开上面的地址看图片。

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

立即学习“前端免费学习笔记（深入）”；

而类似的效果，也可以在vue/uniapp中用稍复杂的代码实现。详见代码里注释的部分：

<style>
  .tabs {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background-color: #E1E1E1;
    border-radius: 82px;
    height: 82px;
  }

  .tab {
    font-size: 36px;
    color: rgba(69, 69, 68, 1);
    width: 100%;
    text-align: center;
    line-height: 82px;
  }

  .tab.active {  // 被选中标签的样式
    color: rgba(255, 255, 255, 1);
    background-color: #31BDEC;
    border-radius: 82px;
  }
</style>

<template>
  <view class="tabs">
    <view v-for="item in ['日', '周', '月', '年']" :class="item==currentDay?'tab active':'tab'" @click="changeDay(item)">
      {{ item }}
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      currentDay: '日',
    }
  },
  methods: {
    changeDay (day) {
      this.currentDay = day
    }
  }
}
</script>

登录后复制

以上就是Vue/Uniapp 中如何实现类似图片所示的日周月年切换标签效果？的详细内容，更多请关注php中文网其它相关文章！