微信小程序文字循环滚动

最新推荐文章于 2025-06-01 13:35:48 发布

明知山_

最新推荐文章于 2025-06-01 13:35:48 发布

阅读量2.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Weapp

本文链接：https://blog.csdn.net/AK852369/article/details/115356734

Weapp 专栏收录该内容

38 篇文章

订阅专栏

这是一个使用微信小程序实现的横向滚动文字效果。代码通过设置样式和定时器动态改变文字的位置，当文字完全滚动出去后，重新回到初始位置，形成无限滚动的效果。主要涉及到CSS的定位和JavaScript的定时器操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<view class="marquee">
	<view class="main" style="transform: translateX({{move}}px);">
		种一颗树最好的时间是十年前，其次是现在
	</view>
</view>

.marquee {
  position: relative;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  white-space: nowrap;
  overflow: hidden;
  font-size: 24rpx;
  color: #fff;
  background: lightcoral;
}

.main {
  position: absolute;
}

Page({
  data: {
    marWidth: 0,
    mainWidth: 0,
    move: 0,
    timer: "",
  },

  onLoad: function () {
    this.initMarquee()
  },

  initMarquee() {
    let query = wx.createSelectorQuery();
    // 获取装载体、文字的宽度
    query.select('.marquee').boundingClientRect((res) => {
      this.data.marWidth = parseInt(res.width)
    }).exec()
    query.select('.main').boundingClientRect((res) => {
      this.data.mainWidth = parseInt(res.width)
      this.moveText()
    }).exec()
  },

  moveText() {
    this.data.timer = setInterval(() => {
      // 每50毫秒移动0.5px
      this.setData({
        move: this.data.move - 0.5
      })
      // 如果完全移动，重新到后移
      if (parseInt(this.data.move) == -this.data.mainWidth) {
        this.setData({
          move: this.data.marWidth
        })
        clearInterval(this.data.timer)
        this.moveText()
      }
    }, 50);
  },
})