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

横向无缝滚动"/>

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

背景：
微信小程序中列表宽度不够长，其中某字段显示不完整，因此要使其自动滚动。
（最初看网上很多用定时器实现，但他们的案例中都只是一个横幅、用定时器也无所谓。但是我的需求中是一个上下无限滚动的列表，如果设置定时器性能耗费太大，因此只用css实现）

样例图：

我这里是列表轮播 + 商品名称字段左右滚动
微信小程序轮播组件swiper有个坑：display-multiple-items设置的值如果大于列表长度，内容将无法显示

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

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

@keyframes scrollText {0% {transform: translateX(0%);}100% {transform: translateX(-100%);}
}

此时有个问题，不是 无缝 的，文本将在右边出现大量空白，在移动到末尾，再突然出现 ，很难看
要处理这个问题：在文本后面添加一个占位文本、当右边本为空白时 显示占位文本，当一轮动画结束时，第一个文本再覆盖占位文本，视觉上就是无限的 无缝滚动 ，要让一轮动画结束完全覆盖占位文本 也很简单，设置一个向左padding值，

<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>

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

统一设置速率（文案长短不一 用同样的动画时长会出现滚动速率不同），

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

<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

.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

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});}}
});