uni-app 文字在区域中上下滚动

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 文字在区域中上下滚动

插件需求 文字在区域中上下滚动

1 回复

在uni-app中实现文字在指定区域中上下滚动,可以通过CSS动画和JavaScript结合来完成。下面是一个简单的示例,展示了如何在uni-app中实现这一效果。

首先,在pages/index/index.vue文件中,定义一个包含滚动文字的容器和相应的样式。

<template>
  <view class="container">
    <view class="scroll-text-container">
      <view class="scroll-text" :style="scrollStyle">{{ scrollingText }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollingText: '这是一个在区域内上下滚动的文字示例。',
      scrollStyle: {
        transform: 'translateY(100%)', // 初始位置在容器外部
        transition: 'transform 10s linear infinite' // 滚动动画设置
      }
    };
  },
  mounted() {
    this.initScrollText();
  },
  methods: {
    initScrollText() {
      const containerHeight = this.$refs.scrollContainer.clientHeight;
      const textHeight = this.$refs.scrollText.clientHeight;
      const fullScrollHeight = containerHeight + textHeight;
      
      // 重新计算动画样式,确保文字从顶部滚动到底部再回到顶部
      this.scrollStyle = {
        transform: `translateY(${containerHeight}px)`,
        transition: `transform ${fullScrollHeight / textHeight * 2}s linear infinite`
      };
    }
  }
};
</script>

<style scoped>
.container {
  height: 200px; /* 容器高度 */
  overflow: hidden; /* 隐藏溢出内容 */
  position: relative;
  border: 1px solid #000;
}

.scroll-text-container {
  height: 100%;
  position: relative;
}

.scroll-text {
  white-space: nowrap; /* 防止文字换行 */
  display: inline-block;
  padding-left: 10px; /* 可根据需要调整 */
}
</style>

注意

  1. 在上面的代码中,scrollStyletransform属性初始设置为translateY(100%),这意味着文字初始位置在容器外部。
  2. transition属性设置了动画的持续时间和线性滚动效果。infinite表示动画无限循环。
  3. mounted生命周期钩子中调用initScrollText方法,用于动态计算容器和文字的高度,并调整动画样式以确保文字能够完整地从顶部滚动到底部再回到顶部。
  4. 由于uni-app中无法直接获取DOM元素的尺寸(如clientHeight),上述代码中的initScrollText方法需要根据实际情况调整,例如使用uni-app提供的API来获取元素尺寸,或者使用其他方法模拟这一行为。

上述代码提供了一个基本的实现思路,具体实现可能需要根据实际需求进行调整和优化。

回到顶部