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

最新推荐文章于 2024-08-18 10:46:46 发布

置顶

G.Bro

最新推荐文章于 2024-08-18 10:46:46 发布

阅读量7.8k

点赞数 8

分类专栏：微信小程序文章标签：微信小程序 html

本文链接：https://blog.csdn.net/fasdfdssdf/article/details/87712996

版权

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

摘要由CSDN通过智能技术生成

正文

基于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: "",
        sta