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

浅浅的花香味﹌ 2022-08-31 02:23 1311阅读 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 条评论，1311人围观）

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

相关阅读

相关 js实现文字竖向滚动

代码已上传至github github代码地址：https://github.com/Miofly/mio.git 移动端适配 <!DOCTYPE html>

╰+哭是因爲堅強的太久メ/ 2023年05月21日 07:07/ 0 赞/ 16 阅读

相关 uni-app实现公告文本超出从右向左循环滚动

用的是css3的动画效果，也可以用定时器或者uni.createAnimation来实现，但是这两种方法都比较容易造成卡死。 html代码 <view class=

╰半橙微兮°/ 2023年02月11日 08:57/ 0 赞/ 32 阅读

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

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

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

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

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

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

相关实现文字滚动效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 css实现文字竖排效果

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

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