ElementUI的走马灯效果应用

Posted 2023-05-17

参考技术A   最近做一个大屏显示，需要循环遍历统计列表每行的数据，然后用循环到的当前行 id 获取其他数据列表，以走马灯的形式显示，全程自动切换。即：（1）统计数据，第一行；-> （2）其他数据A； -> （3）其他数据B； ->（4）其他数据C； ->（1）统计数据，第二行；以此类推。本来用的是 EasyUI ，发现 EasyUI 上没有走马灯，然后就想到了用 ElementUI 的 Carousel 组件。
  以下是定义的四个数据列表的走马灯；

  定义了两个参数；

  当页面渲染完成后，加一个定时器控制它的每间隔多长时间滚动显示；

  滚动的方法，用 this.$refs.carousel.setActiveItem(this.carouselIndex); 来设置滚动的索引切换幻灯片。

  另外为了使走马灯按钮清晰一些，我放大了切换按钮和指示器，加深了一些颜色;

  最后的效果；

winform状态栏跑马灯的效果

参考技术A   　　using System Collections Generic;   　　using System ComponentModel;   　　using System Data;   　　using System Drawing;   　　using System Linq;   　　using System Text;   　　using System Windows Forms;   　　namespace WindowsFormsApplication   　　   　　public partial class Form : Form   　　   　　public Form ()   　　   　　InitializeComponent();   　　   　　private Label label = new Label();   　　public string text = "csdn baihe_ ";   　　private void Form _Load(object sender EventArgs e)   　　   　　this label Location = new Point( );   　　this label Size = new Size( );   　　this Controls Add(label);   　　this label Text = "";   　　this timer Enabled = true;   　　this timer Interval = ;   　　p = new PointF(this label Size Width );   　　   　　PointF p;   　　Font f = new Font("宋体" );   　　Color c = Color White;   　　string temp;   　　private void timer _Tick(object sender EventArgs e)   　　   　　Graphics g = this label CreateGraphics();   　　SizeF s = new SizeF();   　　s = g MeasureString(text f);//测量文字长度   　　Brush brush = Brushes Black;   　　g Clear(c);//清除背景   　　if (temp != text)//文字改变时 重新显示   　　   　　p = new PointF(this label Size Width );   　　temp = text;   　　   　　else   　　p = new PointF(p X );//每次偏移   　　if (p X <= s Width)   　　p = new PointF(this label Size Width );   　　g DrawString(text f brush p);   　　   　　   　　   lishixinzhi/Article/program/net/201311/14349