底部组件实现，上面是文字下面是图片

最新推荐文章于 2024-12-29 15:35:55 发布
原创 最新推荐文章于 2024-12-29 15:35:55 发布 · 2.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#底部组件 #菜单栏 #导航

本文分享了关于底部组件的设计思路，重点介绍了如何通过代码实现底部按钮与不同页面的联动效果，包括HTML引用图片的技巧及JS、CSS部分的关键代码。

话不多说直接代码
HTML部分
**注意点：1，里面的图片我是引用的因为././image.png这种图片不显示所以采用这种方法，2，这个页面是一个底部组件，引用的时候，底部按钮要对应每个页面，如下图：这是第三个按钮，0，1，2分别对应三个底部按钮也对应三个页面，一定要写不然出不来（仅供自己参考）
**

在这里插入图片描述

在这里插入图片描述
JS部分
在这里插入图片描述
在这里插入图片描述
CSS部分
在这里插入图片描述

Android 使用BottomNavigationView和Novigation组件实现底部导航功能
路宇的博客
10-10 2075
效果图如下： 实现步骤： 在工作之前添加所需的相关依赖,切记这个一定不要忘了 implementation 'androidx.navigation:navigation-fragment:2.2.2' implementation 'androidx.navigation:navigation-ui:2.2.2' 一、首先做准备工作,创建4个Fragment和对应的布局文件，和menu文件 1.四个Fragment我拿出一个供大家参考 FirstFragment类 public class First
实现一个轮播图添加文字或图片
weixin_45932157的博客
08-24 3221
<template> <view class="content"> <view class="cancle" @click="cancleBack"> 取消 </view> <view class="facontent"> <view class="facontent_textarea"> <textarea maxlength="200" v-model="content" value="" p
vue实现带图片的标题栏
tjzc1352640的博客
10-25 5368
一般的标题中需要一个图片和文字标题如下，m-header中包含两个元素，一个是图片icon，另外一个是文字text <div class="m-header"> <div class="icon"></div> <h1 class="text">Chicken Music</h1> </div> 这种情况下在css中首先需要给父元素m-header设置position属性，方
vue解决弹出图片显示在弹框下方
Nero的博客
08-04 2878
弹出的图片显示在弹框下面怎么办问题来源问题分析解决方法 问题来源 在写前端vue项目时，在用到ele的 el-image 这个组件时，有时会出现图片显示在弹框即dialog下面，后面发现是因为el-image组件，默认的z-index是2000。 后来我将这个z-index设置了一个较大的值，但是还会出现显示在弹框下面。 继续找问题，接着发现我是用的dialog打开了另外第2个dialog，在第2个dialog中打开el-image这个标签。 问题分析 通常会在dialog里加入append-to-bod
vue制定文章内容模板，文章的每一段对应数组的每一项，支持存放多张图片
qq_45838886的博客
04-27 1590
制定文章内容模板，文章的每一段对应数组的每一项，支持存放多张图片 demo: 这样的一行，就是文章的一段 用户输入内容时，这一段的内容就会同步到数组中，即第一段的内容会同步到数组的第一项，以此类推（图片会转成base64的格式）。 可以点击“增加一行”来插入段落，相应的，数组也会增加相应的项。 代码： <template> <div> <div class="edit" v-for="(item, index) in myFiles"
vue 图片写入文字,图片注入文字,图片添加文字
qq_16920371的博客
08-30 7737
【代码】vue 图片写入文字,图片注入文字,图片添加文字。
CSS之垂直对齐
qq670471201的博客
11-19 471
CSS之垂直对齐 vertical-align: baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的底端与行中最低的元素...
iOS 将系统自带的button改装成上图片下文字的样子
01-20
// 文字底部对齐图片顶部 tempLabelRect.size.width = self.bounds.size.width - 40; // 文字宽度为按钮宽度减去40 tempLabelRect.size.height = self.bounds.size.height - self.imageView.frame.size.height; /...
HarmonyOS NEXT实现文字和图片的方式和AI对话
2303_78789385的博客
12-29 1155
作品效果：大模型的回答：大家根据上面的图片就大概知道了这是一个怎么样的业务逻辑。
微信小程序Video组件实现视频、自定义播放按钮、封面图、封面图文字demo
qq_43447509的博客
08-05 9675
效果图 实现思路 在video标签中添加view或cover-view标签，封面图可直接设置video组件的poster属性，自定义按钮和封面图文字包在view中设置定位即可，给自定义按钮绑定点击事件，触发事件后隐藏最外层view，给video绑定bindended事件 设置最外层view显示 wxml ```css .video_item { margin-top: 33rpx; } .video { width: 686rpx; height: 330rpx; } .cover { w
Gallery上边图片下边文字显示并且支持大图预览
01-27
Gallery上边图片下边文字显示并且支持大图预览
Android代码实现图片和文字上下布局
01-05
在Android开发中经常会需要用到带文字和图片的button，下面来给大家介绍使用radiobutton实现图片和文字上下布局或左右布局。代码很简单就不给大家多解释了。 布局文件很简单，用来展示RadioBUtton的使用方法。 <?xml version=. encoding=utf-?> <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_width=match_parent android:layout_height=match
android 带文字的图片按钮的实现
06-01
Android没有提供在图片上写文字的控件，如果在按钮上直接写文字的话，图片和文字就重叠。
vue2使用字体图标
snow_small的博客
02-18 620
一、图标样式有SVG转换为图标字体 1、打开：https://icomoon.io/ 2、点击 3、点击导入SVG文件 4、选中字体图标，点击下方生成 5、下载 6、下载下来的安装包打开，打开demo.html可以查看如何使用 &lt;span class="icon-add_circle"&gt;&lt;/span&gt; 最终我们只需要fonts文件夹和styl...
Vue练习2：组件开发2（字体图标组件）
前端萌新
02-16 160
【代码】Vue练习2：组件开发2（字体图标组件）
5、Flutter - 控件基础（三）布局
shengdaVolleyball的博客
06-14 411
Flutter - 控件基础（三）布局 上篇补充 final 是运行时赋值之后不可变 const 是常量 布局代码详细代码参见Demo Demo地址 -> flutter_testdemo1 1、控件显示 对应Demo中 base_widget.dart 1.1、纯文本显示 import 'package:flutter/material.dart'; // ----------------- 文本 ----------------- class TextDemo e..
vue3使用viewer
热门推荐
weixin_44364294的博客
02-20 1万+
整理vue3+ts项目使用v-viewer过程，以及viewer的method、option、event整理
android 图片下面显示文字
findsafety的专栏
03-21 4836
自定义Android带图片的按钮 前言 现在移动设备的按钮设计讲究大图标小文字，希望用户只要一看到图标便能知道这个按钮是干嘛的，但又要有必要的文字提示，最常见的就数搜索按钮了，上面一个大大的放大镜图标，下面两个字——搜索。 Bill最近也在做具有这种效果的按钮，过程总是曲折的，不过结果总是美好滴~现在Bill把其做法分享给大家，希望对还不会的朋友有所帮助。 先看看bil
修改后，图片悬浮在文字上方，遮住了第一行文字，请分析问题后重新修改
最新发布
07-19
- 第二行文字会从容器的最左边开始，也就是在图片的下方（因为图片是绝对定位，不占据空间，所以第二行文字会从容器左边开始，但容器有左内边距，所以第二行文字实际上是从图片的右侧下方开始，与第一行文字对齐）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值