uniapp 小程序实现底部tabbar的按钮

已于 2022-09-26 11:24:15 修改
阅读量4k 收藏 2
点赞数
分类专栏： 小程序 文章标签： 小程序 javascript css
于 2022-07-20 14:07:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LW0512/article/details/125890953
版权
本文介绍如何在uniapp中创建并使用底部tabbar组件。通过创建uni-nav-foot.vue组件，并在home.vue和my.vue等页面引入，设置不同type值来实现不同页面的tabbar功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

uniapp 小程序实现底部tabbar的按钮

1 效果如图

在这里插入图片描述

2 实现步骤

2.1 先创建组件 因为是底部tabbar 这边就命名为uni-nav-foot文件夹

在这里插入图片描述

uni-nav-foot.vue

<template>
  <view class="bottombox">
    <view class="middlebox" @tap="toRectify">
      <i class="iconfont icon-saoma"></i>
    </view>
    <view class="tableft" :class="type == 'userhome' ? 'activebtn' : ''" @tap="toHome">
      <i class="iconfont icon-biaoqianlan_shouye"></i>
      <view>首页</view>
    </view>
    <view class="tabright" :class="type == 'usermy' ? 'activebtn' : ''" @tap="toMy">
      <i class="iconfont icon-wodedamaijihuo"></i>
      <view>我的</view>
    </view>
  </
最低0.47元/天 解锁文章
uniapp 小程序 设置按钮固定到页面的最下方
xiaohua616的博客
08-21 2302
uniapp 小程序 设置按钮固定到页面的最下方
uniapp 固定到屏幕底部的按钮
闫的博客
02-21 2726
重要代码：padding-bottom: constant(safe-area-inset-bottom);
探索 uniapp 中四款精美按钮样式，代码直接拿走！
最新发布
Smell_of_earth的博客
02-11 875
本文分享uniapp中四种按钮样式。渐变按钮利用背景渐变增强交互性；立体按钮借助阴影和变换模拟真实按压；透明边框按钮悬停时颜色变化，简洁现代；动画按钮通过伪元素实现悬停动画。同时给出各按钮的HTML和CSS代码，方便开发者使用。
uniapp 按钮固定在底部
s_156的博客
04-07 1万+
1、过于简单，直接上代码。 width:100% position:fixed; bottom:0; 2、效果
uniapp底部按钮
m0_61973243的博客
11-05 560
【代码】uniapp底部按钮。
uniapp 头部 底部固定 中间滑动
az44yao的专栏
09-30 1523
<template> <view class="scrool-page" ref='xx'> <view class="header-cont">头部</view> <view class="list-cont"> <scroll-view class="scrool-more" style="height: 100%" scroll-y="true" scroll-with-animation="true"> .
uniapp底部按钮组
weixin_52726621的博客
09-25 293
uni.showActionSheet再也不用自己傻傻的自己写样式了，复制直接用！
uniapp小程序自定义动态tabbar
04-08
小程序的TabBar是底部固定显示的导航栏，通常包含多个页面的快捷入口。微信、支付宝、百度等小程序平台都提供了预设的TabBar样式，但往往不能满足所有设计需求，因此自定义动态TabBar成为了解决这一问题的关键。 3....
uniapp 微信小程序tabbar凸起的显示
08-25
在`uniapp`中处理微信小程序的tabbar凸起效果并确保其不闪烁，是一项技术性工作，涉及到CSS样式、事件处理以及可能的动画优化。 首先，我们需要了解微信小程序中的`tabbar`配置。在`app.json`文件中，我们可以定义...
uniapp小程序自定义底部导航栏中间凸起样式
zhang79513的博客
02-05 2138
我自己写的自定义的tabbar效果图废话少说咱们直接上代码，一步一步来。
uniapp 小程序实现中间突起tabbar
hu104160112的博客
09-08 5537
先看下效果 实现步骤 1.先引入uview ui，不会的可以看下我另外一篇文章，写的很详细 uniapp 中uview-ui的使用教程 https://blog.youkuaiyun.com/hu104160112/article/details/120076812?spm=1001.2014.3001.5501 2.创建tabbar 组件及页面 3.pages.json文件中配置 { "easycom": { "autoscan": true, "custom": { "^uni-(.*)":
uniapp实现吸顶，吸底
04-23
uniapp实现吸顶，吸底 通过createSelectorQuery方法监听，提高性能
【uniapp】开发微信小程序自定义底部tabbar
热门推荐
韩旭不会敲代码吧的博客
04-19 1万+
uniapp开发微信小程序自定义底部tabbar
Uniapp小程序开发-底部tabbar的开发思路
Bruce__taotao的博客
02-24 2367
记录uniapp 开发小程序的底部tabbar ，这里讨论的不是自定义tabbar的情况。而是使用wx.setTabBarItem(Object object) 这个api的情况。关于custom 小程序底部tabbar的可以跳过。今天的内容就在这里了，本文讨论如何使用uniapp实现基本tabbar功能，接着给出动态设置icon的思路。依赖的api是uni.setTabBarItem。
uniapp使用flex布局实现头部底部固定，中间滚动
abc2944069953的博客
09-04 1876
【代码】uniapp使用flex布局实现头部底部固定，中间滚动。
【微信小程序-uniapp】CustomButton 自定义常用吸底按钮组件
Komorebi_00的博客
07-17 958
自定义常用吸底按钮组件和常用样式，适用于uniapp小程序
【UNI】底部梯形按钮组件
随便写写
07-29 401
uni底部梯形按钮
uniApp开发小程序自定义tabBar底部导航栏+tabBar中间凸起自定义样式实现
m0_60859997的博客
11-25 1万+
我要卖我要买
uniapp小程序，适配苹果底部黑条虚拟键，适配安全区域
qq_59572992的博客
06-14 4334
uniapp小程序，适配苹果底部黑条虚拟键，适配安全区域
uniapp小程序开发底部tabbar
09-10
在uni-app中开发小程序时，底部tabbar是一个非常常见的功能，它用于快速切换不同的页面。 在uni-app中创建底部tabbar，通常需要在页面的配置文件中进行设置，具体步骤如下： 1. 在`pages.json`文件中配置tabbar的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值