vue+elementUi——实现竖向公告滚动效果(功能实现)

浅浅的花香味﹌ 2022-08-31 02:23 1283阅读 0赞

最近在做电商前台页面，首屏右下角有个公告，需要实现`竖向滚动`效果。也就是个竖向的轮播。  
![在这里插入图片描述][bfba9890aa309c7427d237458aeac766.png]  
`elementUi`中是有轮播效果组件的。  
![在这里插入图片描述][23db0e3f20256114d204d27e3bd5987d.png]  
代码如下：

<el-carousel class="lunbo" height="35" direction="vertical">
      <el-carousel-item v-for="(item, index) in currentTabList" :key="index">
        <a :href="'/resource?id=' + item.id + '&type=' + currentTab" target="_blank">{ {  item.title }}</a>
      </el-carousel-item>
    </el-carousel>

上面的代码需要注意的就是`height`和`direction`两个属性，`height`是轮播组件的高度,`direction`是轮播的方向。

另外，公告的内容有时候会比较多，所以需要一行展示，因此需要添加样式：

.lunbo { 
      padding: 0 8px 0 0;
      box-sizing: border-box;
      height: 35px;//文本区域的高度
      line-height: 35px;//文本的行间距，与高度相同，则表示一行展示
      text-overflow: ellipsis;//超出内容...展示
      word-break: keep-all;//是否折断文本，keep-all表示不折断
      white-space: nowrap;//不换行展示文本
      overflow: hidden;//超出部分隐藏，与text-overflow配合使用
      flex: 1;//这个是跟左侧的图片组成的一个flex布局
    }

[bfba9890aa309c7427d237458aeac766.png]: /images/20220829/37404f27533d4c34a7bb33f5b8086f11.png
[23db0e3f20256114d204d27e3bd5987d.png]: /images/20220829/da767f2157ca4f87bee0c300bd6e85ba.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1283人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序上下滚动公告实现

<!-- <swiper class="swiper_container" vertical="true" autoplay="

水深无声/ 2022年12月30日 03:37/ 0 赞/ 109 阅读

相关 html实现图片自动滚动效果,js实现图片左右滚动效果

需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。前提条件：美工把静态页面写好 HTML代码： @using Models

曾经终败给现在/ 2022年10月05日 12:44/ 0 赞/ 283 阅读

相关实现文字滚动效果

需求：滚动文字：每隔200ms 更新一次实现步骤： 1 、将第一个p标签的文字存储下来txt

浅浅的花香味﹌/ 2022年09月11日 13:14/ 0 赞/ 234 阅读

相关 css 隐藏滚动条竖向y滚动，横向x不滚动

.bottom { overflow-x: hidden; overflow-y: scroll; } 参考博客：

左手的ㄟ右手/ 2022年09月09日 14:51/ 0 赞/ 232 阅读

相关公告——实现两个公告同屏滚动轮播(elementUi-走马灯效果实现)

最近在做电商前台页面，需要实现的功能是：两组数据同屏竖向滚动轮播： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shad

缺乏、安全感/ 2022年09月01日 14:52/ 0 赞/ 740 阅读

相关 vue+elementUi——实现竖向公告滚动效果(功能实现)

最近在做电商前台页面，首屏右下角有个公告，需要实现`竖向滚动`效果。也就是个竖向的轮播。 ![在这里插入图片描述][bfba9890aa309c7427d237458aea

浅浅的花香味﹌/ 2022年08月31日 02:23/ 0 赞/ 1284 阅读

相关 js实现内容滚动效果

首先说下实现内容滚动效果的思路：在一块区域内实现内容滚动效果，要求内容轮播，那么如何实现轮播呢？我们将原内容复制一份放置其后面，当原内容滚动完成（即父层scrollTop等于原

爱被打了一巴掌/ 2022年06月13日 03:51/ 0 赞/ 615 阅读

相关 iframe去掉竖向滚动条仍可以滚动

iframe内部页面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset

迷南。/ 2022年06月05日 06:46/ 0 赞/ 603 阅读

相关 C语言实现从左向右字幕滚动的效果

include <stdio.h> include <string.h> include <windows.h> int main() { char str[100]

古城微笑少年丶/ 2021年10月24日 07:00/ 0 赞/ 407 阅读

相关 css实现文字竖排效果

html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。

朱雀/ 2020年04月28日 06:21/ 0 赞/ 962 阅读