更新记录
1.0.0(2025-06-28)
初始化版本,单条字符串左右循环滚动
平台兼容性
uni-app x
| Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
| - |
- |
5.0 |
14 |
× |
× |
wj-scroll
插件介绍
wj-scroll 是一个基于 UTS 开发的字符串滚动显示插件,支持多平台使用。
主要功能
- 支持字符串文本的水平和垂直滚动显示
- 可自定义滚动速度和方向
- 支持文本样式设置(字体大小、颜色等)
- 支持暂停和恢复滚动
- 支持循环滚动模式
开发文档
使用方法
<template>
<wj-scroll
:text="scrollText"
:speed="scrollSpeed"
:direction="scrollDirection"
:fontSize="fontSize"
:textColor="textColor"
@onScrollEnd="handleScrollEnd"
/>
</template>
<script setup>
import { ref } from 'vue'
const scrollText = ref('这是一段需要滚动显示的文本内容')
const scrollSpeed = ref(50) // 滚动速度
const scrollDirection = ref('horizontal') // 滚动方向:horizontal/vertical
const fontSize = ref(16)
const textColor = ref('#333333')
function handleScrollEnd() {
console.log('滚动结束')
}
</script>
属性说明
| 属性名 |
类型 |
默认值 |
说明 |
| text |
String |
'' |
要滚动显示的文本内容 |
| speed |
Number |
50 |
滚动速度(像素/秒) |
| direction |
String |
'horizontal' |
滚动方向:horizontal(水平)/vertical(垂直) |
| fontSize |
Number |
16 |
字体大小 |
| textColor |
String |
'#333333' |
文字颜色 |
| loop |
Boolean |
true |
是否循环滚动 |
| autoStart |
Boolean |
true |
是否自动开始滚动 |
方法说明
| 方法名 |
说明 |
| startScroll() |
开始滚动 |
| pauseScroll() |
暂停滚动 |
| resumeScroll() |
恢复滚动 |
| stopScroll() |
停止滚动 |
| resetScroll() |
重置滚动位置 |
事件说明
| 事件名 |
说明 |
| onScrollStart |
滚动开始时触发 |
| onScrollEnd |
滚动结束时触发 |
| onScrollPause |
滚动暂停时触发 |
| onScrollResume |
滚动恢复时触发 |
版本历史
v1.0.0
- 初始版本
- 支持基本的文本滚动功能
- 支持水平和垂直滚动
- 支持基本的样式设置