微信小程序文本横向无缝滚动-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序文本横向无缝滚动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景：
微信小程序中列表宽度不够长，其中某字段显示不完整，因此要使其自动滚动。
（最初看网上很多用定时器实现，但他们的案例中都只是一个横幅、用定时器也无所谓。但是我的需求中是一个上下无限滚动的列表，如果设置定时器性能耗费太大，因此只用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文章来源地址https://www.toymoban.com/news/detail-735979.html

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