更新记录
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
- 初始版本
- 支持基本的文本滚动功能
- 支持水平和垂直滚动
- 支持基本的样式设置