利用ColorUI实现底部操作栏中间凸起按钮的方法

最新推荐文章于 2023-03-28 11:28:16 发布
最新推荐文章于 2023-03-28 11:28:16 发布
阅读量484 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myfather103/article/details/119004550
版权
本文介绍了如何在使用ColorUI时，通过复制其图标样式并进行修改，来实现底部操作栏中带有自定义图片背景的凸起按钮。内容主要涉及CSS样式调整。
摘要由CSDN通过智能技术生成

ColorUI提供的是自带的图标，但我需要的是自定义图片背景，于是我抄了ColorUI中的图标样式，然后做了以下设置：

<button class="centered_button" :style="your image url"/>

样式代码


  .centered-button{
   
    position: absolute;
    width: 70upx;
最低0.47元/天 解锁文章
duxingzhe103
关注
uni-fab彩色悬浮按钮
12-01
将此代码复制到unimoudle下的uni-fab.vue内直接可以用
微信小程序中使用colorui自定义tabbar按钮
qq_38439171的博客
05-24 778
废话不多说,直接上代码 app.json { "pages": [ ], "window": { "navigationBarBackgroundColor": "#379afb", "navigationBarTitleText": "青丰工具", "navigationStyle": "custom", "navigationBarTextStyle": "white" }, "usingComponents": {}, "tabBar": {
ColorUI使用与技巧
Linlietao0587的博客
12-23 1万+
1 ColorUI学习 1.1 准备 引入资源 demo中的colorui – app.wxss @import '/colorui/icon.wxss'; @import '/colorui/main.wxss'; 1.2 自定义导航栏 app.json 配置取消系统导航栏，并全局引入组件 "window": { "navigationBarBackgroundColor": "#39b54a", "navigationBarTitleText": "Color UI", "naviga
原生微信小程序开发引入colorUI组件
糖果π
09-22 1141
原生微信小程序开发引入colorUI组件
底部导航栏中间圆形按钮凸起效果demo
07-04
这是一个使用RelativeLayout+RadiouGroup+ImageView制作的中间凸起的按钮效果，代码简单易懂，避免了使用自定义控件带来的繁琐问题。
Android 实现底部导航中间菜单凸起效果
06-14
实现底部导航栏中间菜单凸起效果是为用户提供更直观、更具吸引力的交互体验。下面我们将详细探讨如何在Android中实现这个效果。 首先，我们需要了解Android的底部导航栏的基本结构。通常，它由一个`Bottom...
Android中底部tab，中间凸起按钮的效果
03-13
在Android应用开发中，设计一个具有底部导航栏（Bottom Navigation）且中间按钮凸起效果的界面，可以增强用户的交互体验，提升应用的视觉吸引力。本文将深入探讨如何在Android中实现这种特定的底部tab设计。 首先，...
MUI 使用原生底部栏（中间凸起图片）
11-06
在MUI中，底部栏的实现通常是自定义的，可以进行高度定制以满足特定需求，比如中间凸起的图片效果。 中间凸起的图片设计是底部栏的一种特殊形式，它可以增加视觉焦点，突出当前选中的状态。这种设计在很多知名应用...
android底部bar中间凸起的实现
03-16
"android底部bar的中间凸起实现"这个主题聚焦于如何在Bottom Navigation Bar的中心按钮上创建一个突出的效果，以吸引用户的注意力或者突出某个特殊功能。下面将详细介绍如何实现这一效果。 首先，我们需要了解...
APP底部导航
CSDNmazhiyuan的博客
09-27 1084
charset="utf-8">   name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />         rel="shortcut icon" href="favicon.ico">   href="
支持悬浮提示的CSS3按钮效果.rar
07-10
这是一款十分漂亮的按钮效果，同时适用于移动开发端。支持悬浮提示的CSS3按钮效果，鼠标悬停于按钮时，渐变滑出提示文字，提示框为黑色带渐变动画，可通过修改CSS改变提示框样式，最终的运行效果请能参见演示截图所示。
仿闲鱼底部凸起导航栏
weixin_37637452的博客
09-28 3224
在网上查了资料，大部分都是安卓的，没有css的。所以我决定自己动手写一个。 实现思路： 原有基础上有四个底部导航栏图标，新加一个占位（用的是mui框架,如果不加还要自己写布局） &lt;a class="mui-tab-item" href="#tabbar-with-chat"&gt; &lt;div class="circle"&gt; &lt;!-- &lt;div ..
html5 tab凸起,搭建中间凸起的Tab菜单结构
weixin_40007189的博客
06-18 377
今年的双11又再一次刷新了记录，大家剁手做贡献了吗回到今天的主题，很多app底下的Tab菜单结构为了突出，中间的tab比两边的高。思路使用FragmentTabHost搭建Tab菜单使用一张图片放在Tab中间实现1.使用FragmentTabHost搭建Tab菜单布局activity_main.xmlxmlns:android="http://schemas.android.com/apk/res...
html 底部导航栏中间凸起效果源码,Nuxt/Vue仿咸鱼Tabbar凸起效果|vue自定义导航栏...
weixin_35480412的博客
06-05 770
引言在手机端项目开发时，很多场景下标签栏TabBar和导航栏NavBar功能必不可少。由于Nuxt项目中需要用到类似咸鱼底部凸起导航效果，只能自己动手造一个自定义导航组件。如上图：在项目中实例效果ok，下面就详细讲解下实现方法。首先，需要在components目录下新建 headerBar.vue 和 tabBar.vue 页面。紧接着，在 plugins 目录下新建 componentsInst...
uniapp 自定义tabbar_微信小程序ColorUI自定义底部导航条TabBar
weixin_39671935的博客
11-23 3103
一、项目中引入ColorUIColorUI其实是一套小程序的CSS框架，最近使用的比较多，刚好在自定义底部导航栏遇到一些坑，特有以此推文。微信小程序自定义底部导航条tabBar，有两种主流方式，一种是将TabBar页面和底部导航条作为组件，进行模拟切换，但是严格来说这种方式不太适用于复杂场景，很多页面级的生命周期等属性无法使用。另外一种就是通过微信小程序自定义TabBar接口，来实现接管...
【项目开发记录】微信小程序
Joise_的博客
03-28 451
可以通过上个页面跳转带过来的参数；可以通过当前页面请求过来的数据设置也可以；
color ui
热门推荐
qinjinhua_的博客
07-20 1万+
ColorUI是一个css库！！！
微信小程序 ColorUI 自定义底部导航条TabBar
weixin_44069569的博客
07-06 2435
一、项目中引入ColorUI ColorUI其实是一套小程序的CSS框架，最近使用的比较多，刚好在自定义底部导航栏遇到一些坑，特有以此推文。 微信小程序自定义底部导航条tabBar，有两种主流方式，一种是将TabBar页面和底部导航条作为组件，进行模拟切换，但是严格来说这种方式不太适用于复杂场景，很多页面级的生命周期等属性无法使用。另外一种就是通过微信小程序自定义TabBar接口，来实现接管系统TabBar，这也是本文的实现方法，能够完美复刻默认系统TabBar，更可增加自定义的功能实现。 二、 通过文件复
2.微信小程序（colorUI）- 构建底部操作条
weixin_45369499的博客
03-17 1758
   写在前面：colorUI中提供了很多好看的底部操作条，如何使用这些底部操作条让我们的项目看起来更美观（ps：微信小程序的底部操作条tabBar总感觉少了点什么）。 一、null 二、null
android底部导航栏中间凸起
最新发布
05-20
在 Android 底部导航栏中间凸起的效果通常被称为 "BottomNavigationView 中间凸起" 或者 "BottomNavigationView 中间浮动按钮"。实现这个效果的一种方法是使用自定义的 BottomNavigationView 和 FloatingActionButton，然后将 FloatingActionButton 放置在 BottomNavigationView 的中间。具体步骤如下： 1. 在布局文件中添加 BottomNavigationView 和 FloatingActionButton： ```xml <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" app:itemIconTint="@drawable/bottom_nav_color_selector" app:itemTextColor="@drawable/bottom_nav_color_selector" app:labelVisibilityMode="unlabeled" app:menu="@menu/bottom_navigation_menu"/> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab_add" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal|top" android:src="@drawable/ic_add" app:backgroundTint="@color/colorAccent"/> </androidx.coordinatorlayout.widget.CoordinatorLayout> ``` 2. 创建一个 CoordinatorLayout，将 BottomNavigationView 和 FloatingActionButton 放置在其中。 3. 将 FloatingActionButton 的 layout_gravity 设置为 "center_horizontal|top"，使其在 BottomNavigationView 的上方居中显示。 4. 在 BottomNavigationView 中间插入一个占位符，将 FloatingActionButton 的位置留出来： ```xml <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" app:itemIconTint="@drawable/bottom_nav_color_selector" app:itemTextColor="@drawable/bottom_nav_color_selector" app:labelVisibilityMode="unlabeled" app:menu="@menu/bottom_navigation_menu"> <!-- 中间插入一个占位符 --> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_marginBottom="56dp"/> </com.google.android.material.bottomnavigation.BottomNavigationView> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab_add" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal|top" android:src="@drawable/ic_add" app:backgroundTint="@color/colorAccent"/> </androidx.coordinatorlayout.widget.CoordinatorLayout> ``` 5. 在 BottomNavigationView 中间插入一个占位符，将 FloatingActionButton 的位置留出来。 6. 最后，在 Activity 或 Fragment 中设置 FloatingActionButton 的点击事件即可： ```java FloatingActionButton fabAdd = findViewById(R.id.fab_add); fabAdd.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // 处理点击事件 } }); ``` 通过这种方法，你可以实现一个类似于 "BottomNavigationView 中间凸起" 的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值