公告栏实现文字滚动效果(小程序)

可以用轮播图实现:

WXML:

  <view class="bell-text">
     <swiper class="swiper-content" autoplay="{{true}}" vertical="{{true}}" interval="{{3000}}" circular="{{true}}">
      <block wx:for="{{adList}}" wx:key="{{index}}">
        <swiper-item>
          {{item}}邀请成功,获得5元现金红包!
        </swiper-item>
      </block>
    </swiper>
  </view>

WXSS:

  .bell-text{
    color: #ffffff;
     100%;
    line-height: 48rpx;
  }
  .swiper-content {
    height: 48rpx;
  }

JS:
  data: {
    adList: ['小苹果', 'joanna葵', '艾克~勋', '我心中独居', 'ァ陌优Оㄩ', '莫莉莉', '安屿森年', '初春的雪',
        '哇丶有条狗i', '艾瑞克', '90°鞠躬少年', '十言的泪', '烟毒°', '天下第一帅', '单纯玓活▼', '可爱多多',
        '暖玺 ?', ' 白小白']
  }

原文地址:https://www.cnblogs.com/qianxiaoniantianxin/p/14487255.html