微信小程序文本横向无缝滚动

背景:

微信小程序中列表宽度不够长,其中某字段显示不完整,因此要使其自动滚动。

(最初看网上很多用定时器实现,但他们的案例中都只是一个横幅、用定时器也无所谓。但是我的需求中是一个上下无限滚动的列表,如果设置定时器性能耗费太大,因此只用css实现)

样例图:

我这里是列表轮播 + 商品名称字段左右滚动

微信小程序轮播组件swiper有个坑:display-multiple-items设置的值如果大于列表长度,内容将无法显示

这里主要记录文本横向 无缝 滚动

先说思路:使用css动画让文本向左移动

css 复制代码
@keyframes scrollText {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

此时有个问题,不是 无缝 的,文本将在右边出现大量空白,在移动到末尾,再突然出现 ,很难看

要处理这个问题:在文本后面添加一个占位文本、当右边本为空白时 显示占位文本,当一轮动画结束时,第一个文本再覆盖占位文本,视觉上就是无限的 无缝滚动 ,要让一轮动画结束完全覆盖占位文本 也很简单,设置一个向左padding值,

javascript 复制代码
<view class="scroll-text-warp">
            <text class="scroll-text" style="{{item.scrollStyle}}"> {{item.goods}} </text>
            <text class="scroll-text" style="{{item.scrollStyle}}"> {{item.goods}} </text>
  </view>
javascript 复制代码
.scroll-text {
  white-space: nowrap;
  display: inline-block;
  animation: scrollText 10s linear infinite;
  padding-left: 40rpx;
}

统一设置速率(文案长短不一 用同样的动画时长会出现滚动速率不同),

javascript 复制代码
list.forEach((item) => {
        console.log('item',item)
        const textLength = item.goods.length;
        const animationDuration = textLength * 0.5 + 's';
        item.scrollStyle = `animation: scrollText ${animationDuration} linear infinite;`;
      });
      this.setData({list});

总代码:
wxml

javascript 复制代码
<view class="fifth-warp card-bg" style="height: 500rpx;margin-top: 200rpx;">
  <view class="tab-header">
    <text class="header-item" style="width: 180rpx;">品牌</text>
    <text class="header-item" style="width: 200rpx;flex: 1;">商品名称</text>
    <text class="header-item" style="width: 180rpx;">排名</text>

  </view>

  <swiper vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='{{list.length>5?5:list.length}}' style="height: 350rpx;">
    <block wx:for-index="idx" wx:for='{{list}}' wx:key="index">
      <swiper-item>
        <view class='swiper-content'>
          <text class='content-item' style="min-width: 180rpx;">{{item.brand}}</text>

          <view class="scroll-text-warp">
            <text class="scroll-text" style="{{item.scrollStyle}}"> {{item.goods}} </text>
            <text class="scroll-text" style="{{item.scrollStyle}}"> {{item.goods}} </text>
          </view>
          <text class='content-item' style="min-width: 180rpx;">TOP{{item.rank}}</text>

        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

wxss

javascript 复制代码
.tab-header {
  width: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  color: #BDBDBD;
}

.header-item {
  font-size: 26rpx;
  padding: 20rpx 0 40rpx 0;
}

.swiper-content {
  display: flex;
}

.content-item {
  font-size: 24rpx;
  text-align: center;
}

.scroll-text-warp {
  width: 100%;
  overflow: hidden;
  font-size: 24rpx;
  display: flex;
}

.scroll-text {
  white-space: nowrap;
  display: inline-block;
  animation: scrollText 10s linear infinite;
  padding-left: 40rpx;
}

@keyframes scrollText {
  0% {
    transform: translateX(0%);
    /* 开始位置 */
  }

  100% {
    transform: translateX(-100%);
    /* 结束位置 */
  }
}

js

javascript 复制代码
const {dcApi_ljq} = require('../../api/index.js');

Component({
  options: {
    addGlobalClass: true
  },
  lifetimes: {
    attached: function () {
      this.getList();
    }
  },
  data: {
    list: []
  },

  methods: {
    getList() {
      let list = [
        {brand: 'xxx1', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:1},
        {brand: 'xxx2', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:2},
        {brand: 'xxx3', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:3},
        {brand: 'xxx4', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:4},
        {brand: 'xxx5', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:5},
        {brand: 'xxx6', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:6},
      ];

      list.forEach((item) => {
        console.log('item',item)
        const textLength = item.goods.length;
        const animationDuration = textLength * 0.5 + 's';
        item.scrollStyle = `animation: scrollText ${animationDuration} linear infinite;`;
      });
      this.setData({list});
    }
  }
});
相关推荐
走,带你去玩5 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉5 小时前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code6 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
菌菇汤7 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
CC同学呀14 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
666HZ66619 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十20 小时前
微信点餐小程序—美食物
微信·小程序
向明天乄20 小时前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h1853859224420 小时前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_20 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html