项目地址:https://gitee.com/jielov/music-netease-api.git

先创建三个页面 分别为 home.vue , classify.vue, my.vue 。 以下为基础样式

创建一个 base_tab 为主页面,在base_tab 引入先前创建好的三个页面,关于组件的引用可自行去官网查看

//导入组件
import Home from '@/components/home'
import Classify from '@/components/classify'
import My from '@/pages/index/index' export default {
components: {
Home,
Classify,
My
}
}

导入组件之后,先让组件在页面上显示出来,然后在开始在页面布局

v-if 里的current 是在data里定义的,初始值为0

v-if="current == 0" ,current 可以理解为id,根据id == 几来显示页面

当子页面在父页面 显示出来后,开始定义底部tab样式

<view style="height: 90vh;">
<!-- 三个子页面 -->
<Home v-if="current == 0"></Home>
<Classify v-if="current == 1"></Classify>
<My v-if="current == 2"></My>
<!-- 底部tab样式 -->
<view class="tab">
<!-- 循环 tabbar里面的数据 -->
<block v-for="(item,index) in tabbar" :key="index">
<view class="tab_tiem" :class="[current == index ? 'active': '']" :data-index="index" @tap="tabSwitch">
<view class="item_img">
<image class="image" :src="current != index ? item.img :item.slectImg " mode=""></image>
</view>
<view class="item_name">
{{item.text}}
</view>
</view>
</block>
</view>
</view>

tab 显示的图标 以三元运算来进行 判断 是否选中状态

<image class="image" :src="current != index ? item.img :item.slectImg " mode=""></image>

@tap="tabSwitch" 点击事件

export default {
methods: {
tabSwitch(e) {
console.log(e);
let index = e.currentTarget.dataset.index
this.current = index
}
},
}

循环 tabbar 数据

export default {
data() {
return {
current: 0,
tabbar: [{
img: '../../static/tab/home.png', //未选中
slectImg: '../../static/tab/home_select.png', //已选中
text: '首页',
},
{
img: '../../static/tab/classify.png',
slectImg: '../../static/tab/classify_select.png',
text: '分类',
},
{
img: '../../static/tab/my.png',
slectImg: '../../static/tab/my_select.png',
text: '我的',
}
],
}
},
}

最后css 样式

<style lang="scss">
.tab {
width: 100%;
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1024;
background-color: #FFFFFF;
height: 100rpx;
left: 0;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom);
border-top: 1rpx solid #888888; .tab_tiem {
flex: 1;
width: 25%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
font-size: 24rpx;
color: #666;
height: 80rpx;
} .item_img {
padding-top: 4rpx;
} .image {
height: 30rpx;
width: 30rpx;
} .tab::before {
color: red;
} .item_name {
font-weight: bold;
transform: scale(0.8);
transform-origin: center 100%;
line-height: 30rpx;
} .active {
// color: var(--color) !important;
color: red;
}
}
</style>

自定义 简单 底部tab的更多相关文章

  1. Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...

  2. Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换

    一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...

  3. 【Little Demo】从简单的Tab标签到Tab图片切换

    Tab标签切换效果是比较流行的一种网站页面布局,视觉表现为美观大方,通过标签展示内容.目前在各大网站都有存在这种效果.例如:淘宝的黄金位置使用Tab标签切换效果,网易新闻等. 1.简单的 Tab 标签 ...

  4. Android自定义控件----RadioGroup实现APP首页底部Tab的切换

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  5. jQuery中自定义简单动画的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. Java自定义简单标签

     Java自定义简单标签可以方便的在页面输出信息,并且对于权限的控制,和对于Jsp标签和servlet代码的分离有着很好的作用. 下面将以权限的控制为例自定义一个标签: 一.标签类型 <wxt: ...

  7. 界面底部Tab实现

    现在基本上大部分的手机APP都要实现底部Tab,底部实现Tab的实现方式有很多种,那么有没有好的实现方式呢? 今天我将使用一个开源插件来实现底部Tab 参考自zhangli_的博客:http://bl ...

  8. 使用jQuery实现简单的tab框

    html代码 <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta ...

  9. JSP自定义简单标签入门之带有属性

    上面写的那个简单标签来控制页面中标签内容的重复次数是固定的,这就是权限"写死了",这是非常不好的行为,因为其灵活性太差.所以下面就介绍一种使用属性来控制标签内容输出次数的方法. 准 ...

随机推荐

  1. 第12.5节 Python time模块导览

    一.时间相关的概念 time模块模块提供了各种时间相关的函数,在介绍时间相关功能前,先介绍一些术语和惯例: epoch 是时间开始的点,并且取决于平台.对于Unix, epoch 是1970年1月1日 ...

  2. Xray高级版白嫖破解指南

    啊,阿Sir,免费的还想白嫖?? 好啦好啦不开玩笑 Xray是从长亭洞鉴核心引擎中提取出的社区版漏洞扫描神器,支持主动.被动多种扫描方式,自备盲打平台.可以灵活定义 POC,功能丰富,调用简单,支持 ...

  3. flask中SQLAlchemy学习

    ------------------------------------2019-08-22 17:53:54更新------------------------------ SQLALchemy实在 ...

  4. java中==和equals的不同使用方法

    System.out.println("input a charact a      "); Scanner input2 = new Scanner(System.in); St ...

  5. 题解-CF755G PolandBall and Many Other Balls

    题面 CF755G PolandBall and Many Other Balls 给定 \(n\) 和 \(m\).有一排 \(n\) 个球,求对于每个 \(1\le k\le m\),选出 \(k ...

  6. 看我如何用微信上线CobaltStrike

    前言 DLL劫持漏洞是老生常谈的一个漏洞,已经被前辈们各种奇技淫巧玩烂.但DLL劫持技术在后渗透和域渗透中的权限提升和权限维持都起到了至关重要的作用.本文简单剖析DLL劫持技术并通过实例应用来查看如何 ...

  7. android adb命令* daemon not running.starting it now on port 5037 * 问题解决

    输入adb devices却出现了问题daemon not running.starting it now on port 5037, 2. 原因: adb的端口(5037)被占用了.至于这个5037 ...

  8. Restful规则及JPA导致内存溢出

    HTTP动词 对于资源的具体操作类型,由HTTP动词表示. 常用的HTTP动词有下面五个(括号里是对应的SQL命令). GET(SELECT):从服务器取出资源(一项或多项). POST(CREATE ...

  9. MGRE实验--内网为OSPF

    实验要求: R2为ISP,只能配置IP地址 R1.R3.R4之间构建MGRE环境,仅R1IP地址固定 内网使用OSPF获取路由,全网可达 拓扑: 1.配置IP地址 2.配置缺省 3.配置MGRE环境 ...

  10. RHCE <复习RHSCA>

    什么是shell? shell是你(用户)和Linux(或者更准确的说,是你和Linux内核)之间的接口程序,你在提示符下输入的每个命令都由shell先解释然后传给Linux内核. bash 是大多数 ...