<scroll-text>

<scroll-text> 是一个横向滚动文字的容器，主要用于单行公告。

子组件

无

预览效果

说明：gif图片压缩，原效果非常流畅。

&lt;scroll-text&gt; - 图1

示例代码

  1. <template>
  2.     <div class="app">
  4.         <scroll-text
  5.                 ref="reflectName"
  6.                 class="scroll_text"
  7.                 text="scrollText"
  8.                 speed="2"
  9.                 fontSize="32"
  10.                 @itemClick="itemClick"
  11.         ></scroll-text>
  13.         <scroll-text
  14.                 ref="reflectName2"
  15.                 class="scroll_text"
  16.                 text="scrollText"
  17.                 speed="10"
  18.                 fontSize="32"
  19.                 color="#ff0000"
  20.                 backgroundColor="#00ffff"
  21.                 @itemClick="itemClick"
  22.         ></scroll-text>
  24.         <scroll-text
  25.                 ref="reflectName3"
  26.                 class="scroll_text"
  27.                 text="scrollText"
  28.                 speed="5"
  29.                 fontSize="24"
  30.                 color="#6dff28"
  31.                 backgroundColor="#c8e7ff"
  32.                 @itemClick="itemClick"
  33.         ></scroll-text>
  35.     </div>
  36. </template>
  38. <style scoped>
  39.     .app {
  40.         width: 750px;
  41.         flex: 1;
  42.     }
  43.     .scroll_text {
  44.         width: 750px;
  45.         height: 80px;
  46.     }
  47. </style>
  49. <script>
  50.     const eeui = app.requireModule('eeui');
  52.     export default {
  53.         data() {
  54.             return {
  55.                 scrollText: "这是一段滚动的文字，可以自定义调整速度的滚动文字~~~~~感谢你对eeui的支持！",
  56.             }
  57.         },
  58.         methods: {
  59.             itemClick(params) {
  60.                 let starting = params.isStarting ? "运行中": "停止了";
  61.                 eeui.toast("我被点击了，当前状态：" + starting);
  62.             },
  63.         }
  64.     };
  65. </script>

配置参数

属性名 类型 描述 默认值
content String 滚动的文字 -
text String 同content -
speed Float 滚动的速度 2
fontSize Number 字体大小 24
color String 滚动的文字颜色 #000000
backgroundColor String 滚动的文字背景颜色 #00ffffff

例如：

  1. <scroll-text
  2.     ref="reflectName"
  3.     text="滚动的文字"
  4.     speed="5"
  5.     fontSize="24"
  6.     color="#6dff28"
  7.     backgroundColor="#c8e7ff"
  8.     ></scroll-text>

事件回调 callback

  1. /**
  2.  * 组件加载完成
  3.  */
  4. @ready = function() { ... }
  6. /**
  7.  * 项目点击事件
  8.  * 返回参数：data = {isStarting: false}
  9.  */
  10. @itemClick = function(data) { ... }

调用方法 methods

  1. /**
  2.  * 设置滚动的文字
  3.  * 参数一：滚动文字
  4.  */
  5. this.$refs.reflectName.setText('滚动文字');
  7. /**
  8.  * 添加滚动的文字
  9.  * 参数一：添加的滚动文字
  10.  */
  11. this.$refs.reflectName.addText('滚动文字');
  13. /**
  14.  * 设置为滚动状态
  15.  */
  16. this.$refs.reflectName.startScroll();
  18. /**
  19.  * 设置为停止滚动状态
  20.  */
  21. this.$refs.reflectName.stopScroll();
  23. /**
  24.  * 获取是否在滚动状态
  25.  * 返回参数：true|false
  26.  */
  27.  this.$refs.reflectName.isStarting();
  29. /**
  30.  * 设置文字滚动速度
  31.  * 参数一：滚动速度
  32.  */
  33. this.$refs.reflectName.setSpeed(3);
  35. /**
  36.  * 设置滚动字体大小
  37.  * 参数一：文字大小
  38.  */
  39. this.$refs.reflectName.setTextSize(16);
  41. /**
  42.  * 设置滚动字体颜色
  43.  * 参数一：颜色代码
  44.  */
  45. this.$refs.reflectName.setTextColor('#ff0000');
  47. /**
  48.  * 设置滚动字体背景颜色
  49.  * 参数一：颜色代码
  50.  */
  51. this.$refs.reflectName.setBackgroundColor('#0000ff');