Vue2鼠标悬浮时，卡片展示对应信息效果案例

已于 2024-07-31 15:21:49 修改
阅读量526 收藏 5
点赞数 11
分类专栏： Vue前端 文章标签： javascript vue.js 前端
于 2024-07-31 15:16:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35153900/article/details/140821280
版权

    项目中会用到卡片信息展示效果，记录下两种效果展示Demo,主要是对样式的处理较多，没有逻辑上的东西，如遇到这样的场景，可参考或拿来主义直接使用。

目录

1、效果演示

2、步骤1效果源代码

1、效果演示

走马灯展示卡片信息样式效果

2、步骤1效果源代码

由于template 部分、script 部分比较简单，主要是style 样式部分细节的处理，可以根据需要进行

遮罩颜、透明度、显示文字颜色、大小、走马灯样式等进行修改 。废话不多说，上代码！！！可

直接拿去用。数据源部分这里写死的，图片也是Element里面的图片，实际项目中使用自己的就行。

<template>
  <div>
  <div style="margin-top:5px">
    <el-row style="margin-top: 5px;padding:5px;text-align: center">
      <span style="font-size: xx-large;font-weight: bold" center>信 息 列 表 样 式 一：鼠标悬浮文字下落</span>
    </el-row>
    <el-row style="margin-left:1%;margin-right:1%;margin-top: 5px;">
      <el-carousel class="carouselMy5"  style="width: 100%;height: 440px;" :autoplay="false" :interval="225000"  arrow="hover">
        <el-carousel-item v-for="(chunk, index) in chunkedBusinessCards" :key="index" style="height: 440px;"  >

          <div class="card-container2" style="margin-left: 0px;margin-right: 0px;">
            <el-card class="card2 packageCard2" v-for="(card, cardIndex) in chunk" :key="cardIndex" :body-style="{ padding: '0px' }"
                     style="width: 380px;margin-right: 0px" > <!-- 卡片内容 -->
              <div class="box">
                <el-image :src="card.url" style="width: 100%; height: 400px;" class="image2" >
                  <div slot="error" class="image-slot" style="width: 380px; height: 400px;background-color: #F5F7FA">
                    <i class="el-icon-picture-outline"  style="margin-top: 180px;margin-left: 170px;font-size: xx-large"></i>
                  </div>
                </el-image>&emsp;&emsp;
                <div class="box-content">
                  <div class="content">
                    <el-row style="">
                      <h3 class="title">{{ card.shopName}}</h3>
                    </el-row>
                    <el-row style="">
                      <span class="post">成立时间：{{card.setDate}}</span>
                    </el-row>
                    <el-row style="">
                      <span class="post">信用等级：{{card.creditLevel}}</span>
                    </el-row>
                    <el-row style="">
                      <span v-if="card.yearEnergy!=null&&card.yearEnergy!=''" class="post">销量：{{card.yearEnergy}}MWh</span>
                      <span v-else class="post">销量：</span>
                    </el-row>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-row>
  </div>


  <div style="margin-top:5px">
    <el-row style="margin-top: 5px;padding:5px;text-align: center">
      <span style="font-size: xx-large;font-weight: bold" center>信 息 列 表 样 式 二：鼠标悬浮直接显示</span>
    </el-row>
    <el-row style="margin-left:1%;margin-right:1%;margin-top: 5px;">
      <el-carousel class="carouselMy5"  style="width: 100%;height: 440px;" :autoplay="false" :interval="225000"  arrow="hover">
        <el-carousel-item v-for="(chunk, index) in chunkedBusinessCards" :key="index" style="height: 440px;"  >

          <div class="card-container2" style="margin-left: 0px;margin-right: 0px;">
            <el-card class="card2 packageCard2" v-for="(card, cardIndex) in chunk" :key="cardIndex" :body-style="{ padding: '0px' }"
                     style="width: 380px;margin-right: 0px"> <!-- 卡片内容 -->

              <div class="box">
                <el-image :src="card.url" style="width: 100%; height: 400px;" class="image2" >
                  <div slot="error" class="image-slot" style="width: 380px; height: 400px;background-color: #F5F7FA">
                    <i class="el-icon-picture-outline"  style="margin-top: 180px;margin-left: 170px;font-size: xx-large"></i>
                  </div>
                </el-image>&emsp;&emsp;
                <div class="box-content">
                  <div class="content">
                    <el-row style="">
                      <h3 class="title2">{{ card.shopName}}</h3>
                    </el-row>
                    <el-row style="">
                      <span class="post22">成立时间：{{card.setDate}}</span>
                    </el-row>
                    <el-row style="">
                      <span class="post22">信用等级：{{card.creditLevel}}</span>
                    </el-row>
                    <el-row style="">
                      <span v-if="card.yearEnergy!=null&&card.yearEnergy!=''" class="post22">销量：{{card.yearEnergy}}MWh</span>
                      <span v-else class="post22">销量：</span>
                    </el-row>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-row>
  </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        businessData:[
          {address: "嘻嘻嘻111",
            url:"http://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
            creditCode: "91120116MA05XB730Q", creditLevel: "AAAAA",
            isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
            shopName: "测试卡片样式展示111", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 350
          },
          {address: "嘻嘻嘻222",
            url:"http://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
            creditCode: "91120116MA05XB730Q", creditLevel: "AAAAA",
            isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
            shopName: "测试卡片样式展示222", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 5550
          },
          {address: "嘻嘻嘻333",
            url:"http://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
            creditCode: "91120116MA05XB730Q", creditLevel: "AAA",
            isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
            shopName: "测试卡片样式展示333", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 10
          },
          {address: "嘻嘻嘻444",
            url:"http://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
            creditCode: "91120116MA05XB730Q", creditLevel: "AAAA",
            isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
            shopName: "测试卡片样式展示444", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 1580
          },
          {address: "嘻嘻嘻555",
            url:"http://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
            creditCode: "91120116MA05XB730Q", creditLevel: "B",
            isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
            shopName: "测试卡片样式展示555", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 9998.093
          },
          {address: "嘻嘻嘻666",
            url:"http://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
            creditCode: "91120116MA05XB730Q", creditLevel: "C",
            isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
            shopName: "测试卡片样式展示666", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 3990
          },
          {address: "嘻嘻嘻777",
            url:"http://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
            creditCode: "91120116MA05XB730Q", creditLevel: "AAAAA",
            isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
            shopName: "测试卡片样式展示777", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 750
          },
          {address: "嘻嘻嘻888",
            url:"http://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
            creditCode: "91120116MA05XB730Q", creditLevel: "A",
            isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
            shopName: "测试卡片样式展示888", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 1350
          },
          ],
      }
    },
    methods: {
    },
    computed:{
      chunkedBusinessCards() {
        // 使用数组的 chunk 方法将 businessData分割成每四个元素的数组
        const chunkSize = 4;
        return this.businessData.reduce((chunks, item, index) => {
          if (index % chunkSize === 0) {
            chunks.push([item]);
          } else {
            chunks[chunks.length - 1].push(item);
          }
          return chunks;
        }, []);
      },
    }
  }
</script>
<style scoped lang="less">

  /*****指示器变圆点**************************************/
  /deep/ .el-carousel__indicator--horizontal .el-carousel__button {
    width: 10px;
    height: 10px;
    background: #2683F6;
    border: 1px solid #2683F6;
    border-radius: 50%;
    opacity: 0.3;
  }
  /deep/ .el-carousel__indicator--horizontal.is-active .el-carousel__button{
    width: 10px;
    height: 10px;
    background: #2683F6;
    border-radius: 50%;
    opacity: 1;
  }
  /*****指示器变圆点**************************************/

  /*****每张卡片之间间距**********调整走马灯箭头**********/
  .carouselMy5 .card {
    box-sizing: border-box;
    width: calc(25.00% - 0px); /* 假设每张卡片之间有 10px 的间距 */
    margin-right: 0px;
  }
  .carouselMy5 .card:nth-child(4n) {
    margin-right: 0px; /* 每行的第三张卡片没有右边距 */
  }
  .carouselMy5 .card:nth-child(1n) {
    margin-left: 0px; /* 每行的第三张卡片没有右边距 */
  }

  /*调整走马灯箭头-左箭头*/
  /deep/ .carouselMy5 .el-carousel__arrow--left{
    top: 200px;
    left: 0px;
    font-size: 15px;
    color: #02E9FF;
  }
  /*右箭头*/
  /deep/ .carouselMy5 .el-carousel__arrow--right{
    top: 200px;
    right: 0px;
    font-size:15px;
    font-weight: bold;
    color: #02E9FF;
  }
  /*****每张卡片之间间距**********调整走马灯箭头***********/

  .card-container2 {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    /* 移除 flex-wrap: wrap; 以禁止换行 */
    gap: 0.2vw; /* 卡片间固定间距，使用vw单位保持相对大小 */
    width: 100%; /* 容器宽度，可根据需要调整 */
    height: 420px; /* 或者设置具体高度以适应内容 */
    /* 添加以下属性以允许容器在卡片内容超出时隐藏超出部分，而不是换行 */
    overflow-x: hidden;
    white-space: nowrap;
  }

  .packageCard2 {
    /* 假设卡片的宽高比为1:1，可以根据实际需要调整 */
    /* 使用vw单位让卡片宽度随视口宽度缩放 */
    width: calc((100vw - (3 * 0.2vw))); /* 减去两边gap的宽度，保持总宽度适应 */
    height: 400px; /* 或根据需要设置固定高度 */
    /* 保持最小和最大宽度，防止过度缩小或放大 */
    min-width: 200px;
    max-width: 380px;
    box-sizing: border-box;
    /* 为了确保卡片内容也等比例缩放，可以设置卡片内部内容的宽度和高度 */
    /*    display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden; !* 如果卡片内容过多，隐藏超出部分 *!*/
  }
</style>
<style scoped lang="less">
  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  .floating-bar {
    position: fixed; /* 固定定位，使其始终保持在同一位置 */
    bottom: 50%; /* 使其位于页面底部 */
    margin-left: auto;
    right: 0;
    width: 100px; /* 宽度为100%，以覆盖整个页面底部 */
    height: 30px; /* 高度可以根据你的需求调整 */
    /*background-color: blueviolet; !* 背景色也可以根据你的需求调整 *!*/
    color: #fff; /* 文字颜色 */
    display: flex; /* 使用Flexbox布局，方便内部元素的对齐 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    z-index: 999; /* z-index确保它在其他元素之上 */
  }

  .card2 {
    position: relative; /* 确保遮罩层相对于卡片定位 */
    /* 其他样式... */
  }

  .image2 {
    /* 图片样式... */
    /*width: 100%; !* 宽度设置为 100% 以适应其父元素 *!*/
    /*height: 400px; !* 固定高度，或者也可以使用百分比，但要确保与父元素的高度相协调 *!*/
    display: block; /* 确保图片表现为块级元素，防止底部空白间隙 */
    max-width: 100%; /* 限制图片最大宽度为容器宽度的100% */
    max-height: 100%; /* 可选：限制图片最大高度为视口高度的100vh */
    width: auto; /* 自动调整宽度以保持宽高比 */
    height: auto; /* 自动调整高度以保持宽高比 */
    object-fit: contain; /* 保持图片原始宽高比且缩放至适应容器 */
  }
  /* 如果你想要鼠标悬停在卡片上时改变遮罩层的透明度，可以这样写： */
  .card2 .before:hover {
    opacity: 0; /* 例如，减少透明度到 0.5 */
  }
</style>
<style scoped lang="less">
  /************图片放大，背景色、遮罩、文字掉落********************/
  .box{
    /*width: 380px;*/
    height: 400px;
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
    position: relative;
  }
  /*背景色*/
  .box:before{
    content: '';
    background-color: #28231D;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    transition: all 0.3s ease 0.1s;
  }
  /*背景色 透明度*/
  .box:hover:before{
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    opacity: 0.7;
    animation:bounce-left 0s ease-in forwards;
  }
  /*图片 放大*/
  .box .image2{
    width: 100%;
    height: auto;
    transition: all 0.3s ease 0s;
  }
  .box:hover .image2 { transform: scale(1.5); }
  .box .box-content{
    color: #fff;
    text-align: center;
    width: 160%;
    height: 100%;
    transform:translateX(-50%) translateY(-50%) scale(1);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transition:all 0.3s ease 0.5s;
  }
  .box .content{
    opacity: 0;
    transform:translateX(-50%) translateY(-50%);
    position: absolute;
    left:50%;
    top:50%;
    z-index: 2;
    transition:all 0.3s ease 0s;
  }
  .box:hover .content{ opacity: 1; }
  /*字体颜色 延时效果*/
  .box .title{
    color:  #fff;
    /*color:  #FF3A6F;*/
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    transform: translateY(-300px);
    margin-bottom: 15px;
    opacity: 0;
    transition:all 0.8s ease 0.5s;
  }
  .box .post{
    color:  #fff;
    font-size:13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: capitalize;
    display: inline-block;
    margin-bottom: 5px;
    opacity: 0;
    transform:translateY(-500px);
    transition:all 0.8s ease 0.30s;
  }
  .box .post1{
    color:  #fff;
    font-size:13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: capitalize;
    display: inline-block;
    margin-bottom: 5px;
    opacity: 0;
    transform:translateY(-500px);
    transition:all 0.8s ease 0.35s;
  }
  .box .post2{
    color:  #fff;
    font-size:13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: capitalize;
    display: inline-block;
    margin-bottom: 5px;
    opacity: 0;
    transform:translateY(-500px);
    transition:all 0.8s ease 0.25s;
  }
  .box .post3{
    color:  #fff;
    font-size:13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: capitalize;
    display: inline-block;
    margin-bottom: 5px;
    opacity: 0;
    transform:translateY(-500px);
    transition:all 0.8s ease 0.15s;
  }

  .box:hover .title,
  .box:hover .post,.box:hover .post1,.box:hover .post2,.box:hover .post3{
    opacity: 1;
    transform:translateY(0);
  }
  .box .icon{
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  .box .icon li{
    margin:0 4px;
    opacity: 0;
    display: inline-block;
    transform: translateY(-200px);
    transition: all 0.8s ease 0s;
  }
  .box .icon li:nth-child(2){ transition-delay: 0.1s; }
  .box:hover .icon li{
    opacity: 1;
    transform: translateY(0);
  }

  @keyframes bounce-left{
    25%,50%,75%,100%{ transform:translateX(0); }
    40%{ transform:translateX(30px); }
    70%{ transform:translateX(15px); }
    90%{ transform:translateX(5px); }
  }
  @media only screen and (max-width:990px){
    .box{ margin-bottom: 30px; }
  }
  @media only screen and (max-width:479px){
    .box .title{ font-size: 14px; }
  }
</style>

老头要上朝
关注
  • 11
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 鼠标悬停图片时显示说明文字
weixin_42610010的博客
01-11 2741
在 Vue 中使用鼠标悬停显示说明文字可以使用 v-bind 指令绑定一个 title 属性到图片元素上。 例如： <template> <img v-bind:title="description" src="image.jpg" alt="image"> </template> <script> export default { dat...
vue 鼠标移入不同div悬浮显示不同的表格el-table内容，鼠标移出悬浮内容消失
yxh_529的博客
03-05 1080
如果想要改变表格内容，在ShowBox.vue里面添加传值参数，如下。根据鼠标移入的x、y坐标确定悬浮内容的位置。表格：elment-UI。
Vue如何实现鼠标悬浮时，展示与隐藏弹窗的功能
最新发布
SailingCoder的博客
06-19 1162
通过这种方法，弹窗能够在鼠标悬停在触发元素和弹窗本身上时保持显示，并且在鼠标离开这些区域后，经过一个短暂的延时后自动关闭。这为用户提供了更自然的交互体验。这通常涉及到延时关闭弹窗，以便给用户足够的时间从元素移动到弹窗上，而不触发弹窗关闭。以下是一个实现的例子：（这个例子简单，效果还非常好）如果你需要鼠标在元素和弹窗上时保持弹窗显示，而鼠标离开这两者时隐藏弹窗，你可以使用一个稍微复杂的逻辑来处理鼠标的进入和离开事件。
Vue3结合el-tooltip组件实现文字溢出时，鼠标滑过显示全部文本
qiansitong的博客
10-31 944
文本溢出，鼠标划过悬浮展示全部文本效果
vue 实现鼠标悬浮展示
盖世小可爱的博客
10-09 1919
https://www.cnblogs.com/kiko2014551511/p/11870845.html
Vue实现鼠标悬停，高亮显示指定内容
热门推荐
weixin_43732080的博客
05-26 1万+
Vue自带监听“鼠标悬停”方法 @mouseover(): 鼠标"进入"悬停区域，触发此方法 @mouseleave(): 鼠标"离开"悬停区域，触发此方法 结合以上两种方法，实现“鼠标悬停在文字上-文字变色，鼠标离开悬停区域文字-文字复原颜色” HTML(Template)中： <div :style="avtivecolor" @mouseover="Mouseover()" @mouseleave="Mouseleave()"> 悬停区域文.
VUE3+TS实现鼠标悬浮显示一段文字提示
weixin_42397937的博客
07-04 3731
VUE3+TS实现鼠标悬浮显示一段文字提示
Vue实现鼠标经过文字显示悬浮框效果的示例代码
10-14
主要介绍了Vue实现鼠标经过文字显示悬浮框效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【前端】Vue实现网站导航 以卡片形式显示（附Demo）
码农研究僧的博客
02-10 3206
【前端】Vue实现网站导航 以卡片形式显示（附Demo）
vue鼠标悬浮显示文字
nolanElio的博客
04-15 1万+
之前是用mu-tooltip组件，但是发现移动端会有bug,后来发现vue自带了title属性可以实现 <div :title="msg">{{msg}}</div> //data msg:'测试文字',
vue实现鼠标经过显示悬浮框效果,使用Vue的v-show指令和CSS的:hover伪类,利用Vue的数据绑定
飙歌的博客
11-13 5001
在上面的代码中，我们在组件的data选项中定义了一个名为showTip的数据属性，并将它的初始值设置为false，表示悬浮框默认是不显示的。在模板中，我们使用@mouseover和@mouseleave监听鼠标经过和离开事件，然后修改showTip的值来控制悬浮框的显示和隐藏。利用Vue的数据绑定，实现鼠标悬浮时显示悬浮框，鼠标移开时隐藏悬浮框的效果。如果需要实现多个鼠标悬浮框效果，可以在组件中添加多个showTip属性，并使用不同的名称来控制各自的悬浮框显示和隐藏。步骤二：为悬浮框添加样式。
鼠标悬浮显示全部
小石头
12-16 1284
class=\"tab-mark\" <p></p> <style type="text/css"> .tab-mark { position: relative; } .tab-mark>p { max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; position: absolute; top: 50%
vue element tree自定义树,内容过长显示…鼠标悬浮显示全部两种方法
zhouhouyong_web的博客
08-03 1697
element trre
鼠标悬浮（hover）时显示提示框的效果
Dalao_zzl的博客
05-15 1946
在Vue中，你可以使用多种方法来实现鼠标悬浮（hover）时显示提示框的效果。以下是一个简单的示例，它使用了Vue的指令（directive）和条件渲染（conditional rendering）来实现这个功能。指令来控制提示框的渲染。首先，我们需要在Vue组件中定义一个数据属性来控制提示框的显示与隐藏，以及一个方法来处理鼠标进入和离开事件。另外，如果你想要一个更复杂的提示框（比如支持HTML内容、延迟显示/隐藏等），你可能需要使用一个专门的库，如。（一个Vue的提示框插件）或其他类似的库。
笔记-鼠标悬浮展示图标
珎珎啊
01-06 270
鼠标悬浮展示图标
ele+vue 中鼠标悬浮显示
qq_39349120的博客
11-15 1362
【代码】ele+vue 中鼠标悬浮显示。
vue3自定义指令实现超出显示省略号，鼠标浮入弹出title，显示全部文本
qq_43730272的博客
10-07 1649
vue3实现自定义指令超出显示省略号，鼠标浮入弹出title，显示全部文本
vue根据文字动态判断溢出...鼠标悬停显示el-tooltip展示
weixin_46092900的博客
05-08 989
定义Tooltip是一种小型弹出框，它显示有关特定页面元素的信息，例如按钮、链接或图标。Tooltip通常以半透明的气泡形式呈现，并出现在页面元素的旁边或下方。它可以改善用户体验，使用户更容易理解页面元素的功能和意图。用户可以通过将鼠标悬停在页面元素上来快速了解有关该元素的信息，而无需离开当前页面或浏览其他页面。
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@android:style/Theme.NoTitleBar"“属性。这样可以通过Android自带的主题去掉标题栏。 2. 使用自定义的主题，可以在样式表中添加以下代码： <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> <!-- ...其他样式... --> </style> 这种方式可以通过设置主题去除ActionBar和标题栏，同时保留其他布局元素。 3. 去掉代码中的setTitle()方法，这是一种最简单的方法，通过不设置Activity的标题来实现无标题。 以上就是三种常见的实现Android无标题的方式，开发者可以根据实际需求进行选择。值得注意的是，去除标题栏可能会影响用户的导航体验，因此在设计上需要考虑周全。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值