vue3 element plus 走马灯纵向滚动鼠标滚动

最新推荐文章于 2024-08-22 02:07:07 发布

steven596cl

最新推荐文章于 2024-08-22 02:07:07 发布

阅读量1.1k

点赞数

文章标签： vue.js typescript 前端

本文链接：https://blog.csdn.net/steven596cl/article/details/127403044

版权

本文介绍了如何使用Vue3和Element Plus组件库创建一个支持鼠标滚动的纵向走马灯效果，详细讨论了HTML布局和TypeScript中的滚动事件处理。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、html部分
二、ts部分
- 1.滚动事件
总结

前言

vite2+vue3+ts element plus 走马灯纵向滚动鼠标滚动

提示：以下是本篇文章正文内容，下面案例可供参考

一、html部分

<div style="height: 937px" @mousewheel="rollScroll($event)">
      <el-carousel height="937px" direction="vertical" :autoplay

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

steven596cl

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue竖向表格 - 利用element实现解决纵向循环仿表格布局

self_challenge的博客

12-11

4234

实现效果图需求是完成纵向显示数据，支持表格分组、表头数据均可动态渲染 <template> <div class="box"> <div class="tableHead"> <template v-for="(i,j) in tableHead"> <el-row :key="j"> <el-col :span="i.

vue实现滚动鼠标滚轮切换页面，类似于纵向走马灯、满屏滚动

Lccccb的博客

03-05

7481

新项目产品被甲方的要求逼疯了，大概返稿了100+次吧，最后甲方网上找了个他们认为的比较有科技感的模板，让我们照着写，首页就是类似于纵向走马灯，鼠标滚动切换，一次切换一整屏的效果。之前没接触过，写了个简单的demo，仅作为学习笔记。其实原理很简单，就是把所有页面放在一个div中，然后滚动的时候改变外层div的top即可。因为滚动条监听事件是实时的，所以要加上节流来防止页面切换太快速，我这控制...

参与评论您还未登录，请先登录后发表或查看评论

Vue3 走马灯Vue3Marquee组件库的使用文字走马灯 公告栏

热门推荐

weixin_43699616的博客

03-05

1万+

上面是最终效果图~ 代码 (zmd.vue) ： <template> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="item in imagebox" :key="item.id"> <img :src...

简单的走马灯效果（停顿/无缝滚动）

10-17

走马灯效果是一种常见的网页动态展示技术，常用于制作轮播图、滚动公告或广告栏等，能够吸引用户的注意力并有效地展示多张图片或信息。在这个"简单的走马灯效果"项目中，我们主要探讨如何利用HTML语言实现一个基本的...

在vue3 中，使用element-plus中的el-scrollbar,让内容元素自动滚动

H_jrqn的博客

08-15

4725

在vue3 中，使用element-plus中的el-scrollbar,让内容元素自动滚动

Vue+跑马灯样式实现文字横向滚动

m0_48607837的博客

11-22

2479

Vue+跑马灯样式实现文字左右滚动需求: 在Vue项目的顶部,来实现文字左右滚动步骤: 可以自己封装一个组件,也可以自己写,也可以复制以下代码封装完成以后要在所需的组建中引入,注册,并使用代码: 封装一个专门用来实现跑马灯效果的组件marquee组件 <template>  <div class="marquee-wrap" ref="marquee-wrap"> <div class="scroll" ref="

vue3中用Element Plus 走马灯组件时，鼠标滚动控制轮播效果

qdm13209211861的博客

06-06

968

需求：在垂直方向上可以通过滚动鼠标，来实现每次只轮播一张图片。

vue+elementUI 走马灯多条数据同屏滚动

sumimg的博客

06-29

2760

效果图主要是使用嵌套循环后台给的数据是数组对象形式如下： //处理成二维数组 [[],[],[]]，以应用于页面循环首先处理成二维数组的格式 //页面内 <template> <div class="black_head"> <ul flex="main:justify"> <li>设备编号</li> <li>实时状态</li> <li>运

直播app源码，应用elementPlus table并滚动显示

云豹网络科技

02-02

111

以上就是直播app源码，应用elementPlus table并滚动显示，更多内容欢迎关注之后的文章。直播app源码，应用elementPlus table并滚动显示。1、首先使用了element plus的table。

实现一个具有拖拽功能的跑马灯

yeyeye0525的博客

08-16

366

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。需求分析：需要提供一个组件，可以根据子元素的宽度，自动决定是否进行滚动(跑马灯功能) 滚动的时候，有首尾相连的效果，即滚动到队尾的时候，队头同时从另一端出现(即循环播放，中间不断开) 滚动的同时，可以通过触摸拖动元素(即可向左也可向右拖拽) 考虑多语言的阅读方向，如汉语是从左往右阅读，则marquee从右往左滚动，阿拉伯语是从右往左阅读，marquess从左往右滚动利用vue开发实现.

vue3.x + elementPlus 封装组件之carousel轮播图篇

m0_62015496的博客

06-29

1926

vue3.x + elementPlus 封装组件之carousel轮播图篇

element-plus 使用 el-carousel 跑马灯默认第一页不显示

陈新科的博客

03-30

3490

因为刚开始页面渲染数据还没加载过来，所以第一页无数据。只要el-carousel-item里的for循环有默认长度即可： <el-carousel :autoplay="false" arrow="never" indicator-position="none" :loop="false" v-if="steam.heatPumpCrews[0].shebeiMingZi" //加上这句没数

vue3 element-plus走马灯

12-16

以下是使用Vue3和Element Plus实现走马灯的示例代码： ```html <template> <div class="carousel"> <el-carousel :interval="4000" arrow="always"> <el-carousel-item v-for="(item, index) in list" :key="index"> <img :src="item.imgUrl" alt=""> </el-carousel-item> </el-carousel> </div> </template> <script> import { ref } from 'vue'; import { ElCarousel, ElCarouselItem } from 'element-plus'; export default { components: { ElCarousel, ElCarouselItem, }, setup() { const list = ref([ { imgUrl: 'https://picsum.photos/800/300?random=1' }, { imgUrl: 'https://picsum.photos/800/300?random=2' }, { imgUrl: 'https://picsum.photos/800/300?random=3' }, ]); return { list, }; }, }; </script> <style> .carousel { width: 800px; margin: 0 auto; } </style> ``` 在上面的代码中，我们使用了Vue3的Composition API来定义了一个`list`变量，它是一个响应式的数组，用于存储轮播图的图片地址。然后，我们使用了Element Plus的`ElCarousel`和`ElCarouselItem`组件来实现轮播图的效果。其中，`interval`属性用于设置轮播图的切换时间间隔，`arrow`属性用于设置箭头的显示方式。