微信小程序微信小程序实现跑马灯（多条文字横向衔接滚动）效果完整代码附效果图

最新推荐文章于 2026-04-24 03:39:38 发布

原创

最新推荐文章于 2026-04-24 03:39:38 发布 · 置顶 · 8.1k 阅读

标签

#微信小程序 #html

本文介绍了如何使用CSS3在微信小程序中实现跑马灯（多条文字横向衔接滚动）效果，包括js、wxml和wxss代码示例，并提供了实际效果图。

正文

基于CSS3主要代码实现

效果图

在这里插入图片描述

js代码

// pages/index2/index2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    data: [

      {
        img: "惠便利自提店铺优惠多多惠便利自提店铺优惠多多惠便利自提店铺优惠多多惠便利自提店铺优惠多多惠",
        linkurl: "",
        linkname: "",
        starspos: 0,
        back_color: "gold"
      }, {
        img: "江龙：每日惠自提店铺特价啦~店铺特价啦~店铺特价啦~",
        linkurl: "",
        linkname: "",
        starspos: 0, //间距
        back_color: "#000000"
      }, {
        img: "啦啦啦啦啦啦啦啦啦啦~啦啦啦啦啦~啦啦啦啦啦~",
        linkurl: "",
        linkname: "",
        starspos: 0, //间距
        back_colors: "red"
      }
      , {
        img: "哈哈哈哈~",
        linkurl: "",
        linkname: "",
        starspos: 0, //间距
        back_colors: "red"
      }
    ],
    broadcast_arr: {
      speed: 2.8, //滚动速度，每秒2.8个字
      font_size: "

最低0.47元/天解锁文章

8 条评论

nian-hua 2020.07.21
这个滚动的速度，为何在Iphone上，大概只有设置的速度的一半在移动呢
- 46971526回复奔跑的代码！ 2021.12.15
  你好，解决了吗
- 奔跑的代码！回复nian-hua 2020.12.10
  我的也是在iphone 真机调试就龟速移动老难受了

淡定的小生 2020.02.09
我的代码和你不一样但是我遇到一个问题，滚动时我是获取的屏幕宽度假设我现在左侧有一个小图片，这样就不能占满一整个屏幕宽度滚动了请问我该怎么做

let_me_shy荭 2020.01.13
怎么修改第二轮循环的时间呢？第二轮太慢了
- 46971526回复G.Bro 2021.12.16
  博主，iphone真机上速度慢，怎么解决啊，求求
- 46971526回复G.Bro 2021.12.15
  你好，在iphone 真机调试移动速度慢怎么解决
- G.Bro回复let_me_shy荭 2020.01.14
  [reply]let_me_shy[/reply] broadcast_arr.speed=2.8, //滚动速度，每秒2.8个字修改上面的代码中 broadcast_arr.speed就可以整体提速了；（其实只滚动.marquee_text而已）每条拼接展开在父容器里面