项目地址: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. 第14.6节 使用Python urllib.request模拟浏览器访问网页的实现代码

    Python要访问一个网页并读取网页内容非常简单,在利用<第14.5节 利用浏览器获取的http信息构造Python网页访问的http请求头>的方法构建了请求http报文的请求头情况下,使 ...

  2. bugkuctf web区 多次

    首先看到以下url : 发现这是一个基于布尔类型的盲注. true: false: 根据这两种类型可以进行注入.废话不多说,直接进行尝试. 构造 url = index.php?id=1' or 1= ...

  3. LeetCode初级算法之数组:122 买卖股票的最佳时机 II

    买卖股票的最佳时机 II 题目地址:https://leetcode-cn.com/problems/best-time-to-buy-and-sell-stock-ii/ 给定一个数组,它的第 i ...

  4. c++11-17 模板核心知识(十五)—— 解析模板之依赖型类型名称与typename Dependent Names of Types

    模板名称的问题及解决 typename规则 C++20 typename 上篇文章c++11-17 模板核心知识(十四)-- 解析模板之依赖型模板名称 Dependent Names of Templ ...

  5. python的数据缓存

    Python的数据缓存 python 的内置数据类型,数值型,字符串,列表,字典等都会有自己的对象缓存池, 这样做的好处是,避免了频繁的申请内存,释放内存,这样会极大的降低应用程序的运行速度,还会造成 ...

  6. jsp+servlet实现美妆店铺开发

    一般的商城都有用户端和商城端两个部分,用户端就是给普通用户使用的,像我们在淘宝购物,我们就是使用的用户端:然而淘宝还分了很多个店铺,每个店铺的商品都是店老板安排人员去管理,那店老板管理自己的店铺用到的 ...

  7. Docker(五):Docker安装Elasticsearch

    查找ElasticSearch镜像 镜像仓库 https://hub.docker.com/ 下拉镜像 docker pull elasticsearch:7.7.0 查看镜像 docker imag ...

  8. Nginx(一):安装与常用命令

    简介   Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器,特点是占有内存少,并发能 力强,事实上nginx的并发能力确实在同类型的网页服务器中表现 ...

  9. css 07-浮动

    07-浮动.md #文本主要内容 标准文档流 标准文档流的特性 行内元素和块级元素 行内元素和块级元素的相互转换 浮动的性质 浮动的清除 浏览器的兼容性问题 浮动中margin相关 关于margin的 ...

  10. ssm的pom配置

    <!--引入ssm依赖--> <!--常量和版本号 --> <properties> <!-- 文件编码 --> <project.build.s ...