【微信小程序】怎么写小程序文字跑马灯效果？小程序文字滚动？

wxml

<view class="example xingentimesd">
    <view class="marquee_box">
       <view class="marquee_text" style="{
   {orientation}}:{
   {marqueeDistance}}px;font-size: {
   {size}}px;">
          {
   {text}}
       </view>
    </view>
</view>

wxss

.xingentimesd{
  font-size: 24rpx;
  color: #2397f9;
  letter-spacing: 2rpx;
  text-align: center;
  background: #e6f7ff;
}
.example {
  display: block;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
}

.marquee_box {
  width: 100%;
  position: relative;
}

.marquee_text {
  white-space: nowrap;
  position: absolute;
  top: 0;
}

备注：布局的时候需要注意的必须给滚动文字的父盒子添加position:absolute,否则就实现不了动态效果。谨记！！！

接着就该编写JS来实现文字跑马灯的效果啦！

思路