移动端超长文本如何实现自动轮播且不超出单行文本时不滚动？

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《移动端超长文本如何实现自动轮播且不超出单行文本时不滚动？》，聊聊，希望可以帮助到正在努力赚钱的你。

移动端超长文本的优雅轮播方案

在移动端开发中，经常遇到需要在一行显示文本，但文本过长时需自动轮播，而文本长度不超过一行时则无需滚动的需求。本文提供一种高效的解决方案。

方案概述

本方案采用列表循环渲染技术，巧妙地根据文本长度动态控制轮播行为。文本长度超过单行时，自动启动轮播；反之，则保持静止。

代码示例 (Vue.js)

以下代码示例演示了如何使用 Vue.js 实现该功能。 (注意：为了简洁，省略了部分非核心代码)

      {{ item }}
    </div>
  </div>
</template><script>
import { ref, onMounted, onActivated, onDeactivated } from 'vue';

export default {
  setup() {
    const item = ref('这是一段测试文本，长度可能会超过一行。'); // 可替换为动态文本
    const behavior = ref('paused'); // 初始状态为暂停

    const startScroll = () => { behavior.value = 'running'; };
    const stopScroll = () => { behavior.value = 'paused'; };

    onMounted(checkTextLength); // 页面加载后检查文本长度
    onActivated(checkTextLength); // 组件激活时检查文本长度
    onDeactivated(stopScroll); // 组件停用时停止滚动

    const checkTextLength = () => {
      const textWrapper = document.querySelector('.text-wrapper');
      if (textWrapper.scrollWidth > textWrapper.offsetWidth) {
        startScroll();
      } else {
        stopScroll();
      }
    };

    return { item, behavior };
  },
};
</script><style scoped>
.container { width: 300px; }
.text-wrapper {
  overflow: hidden;
  white-space: nowrap;
  height: 20px;
  animation: scroll 5s linear infinite; /* 动画定义 */
}
@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

实现原理

1. CSS 动画: 使用 CSS animation 属性创建水平滚动动画。animationPlayState 属性控制动画的播放状态 (running 或 paused)。
2. JavaScript 动态控制: checkTextLength 函数通过比较元素的 scrollWidth (内容宽度) 和 offsetWidth (可见宽度) 来判断文本是否超过一行。如果超过，则启动动画；否则，暂停动画。
3. Vue 生命周期钩子: 使用 onMounted, onActivated, onDeactivated 确保在组件的不同生命周期阶段正确处理动画状态。

此方案避免了使用 marquee 标签，提供了更现代化、更灵活的实现方式，并能更好地与 Vue.js 等框架集成。 记住根据实际需求调整 CSS 样式和动画参数。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《移动端超长文本如何实现自动轮播且不超出单行文本时不滚动？》文章吧，也可关注golang学习网公众号了解相关技术文章。