项目地址: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. CQUT校园通知网消息爬虫+Server酱微信推送

    上了大三之后发现很多学校的通知都不会发送到班群里面,导致自己会错过很多重要信息,故想写一个爬虫来获取从当前时间之后的新的通知标题,并推送到微信上. PS:推送到微信上这个想法来源是,很多时候都需要将消 ...

  2. 算法数据结构——数的深搜和广搜(dfs和bfs)

    leetcode104 二叉树的最大深度 https://leetcode-cn.com/problems/maximum-depth-of-binary-tree/ 深度搜索分两种:递归(使用栈) ...

  3. ES6新特性之箭头函数与function的区别

    写法不同 // function的写法 function fn(a, b){ return a+b; } // 箭头函数的写法 let foo = (a, b) =>{ return a + b ...

  4. Springcloud之gateway配置及swagger集成

    前言 关于引入gateway的好处我网上找了下: 性能:API高可用,负载均衡,容错机制. 安全:权限身份认证.脱敏,流量清洗,后端签名(保证全链路可信调用),黑名单(非法调用的限制). 日志:日志记 ...

  5. 用STM32定时器测量信号频率——测频法和测周法[原创cnblogs.com/helesheng]

    工业测试与控制系统中,经常需要对未知信号的频率进行测试.对于10MHz以下的信号,用单片机(MCU)定时器完成这项任务显然是最常见和最佳的选择.目前性价比最高的单片机STM32拥有功能强大且数量众多的 ...

  6. js防抖与节流了解一下

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 新挖个坑,准备学习一下databricks的spark博客

    挖坑 https://databricks.com/blog 一.spark3.0特性(Introducing Apache Spark 3.0) 1.通过通过自适应查询执行,动态分区修剪和其他优化使 ...

  8. Java为什么称为动态编译?

    Java在程序运行时产生Java类并编译成.class文件.

  9. sqli-labs less-24(二次注入)

    less-24 原理: 在网站处理用户提交的数据的时候,只是将某些敏感字符进行了转义.因而使得用户第一次提交的时候不会被当做代码执行.但是这些数据存入数据库的时候却没有转义,而网站程序默认数据库中的数 ...

  10. Error while instantiating 'org.apache.spark.sql.hive.HiveSessionStateBuilder': —— windows 开发环境使用spark 无法访问hdfs 问题解决

    ## 错误: ## 解决方案: 下载 hadoop 的可执行tar包,解压放在windows 本地,并配置环境变量. 在 解压后的文件夹的bin目录下放入两个文件: winutils.exe, had ...