Small program text rolling running lamp

The expectation is to make a text scrolling play and then switch to the next one, so I went to some online code to integrate my own ideas, and then worked with the widget's * * swiper * * component to get the effect.

1. wxml

 <!-- horse race lamp -->
  <view class="buy-bb-fixed">
    <swiper autoplay='{{autoplay}}' circular='true' class="swiper_container" displayMultipleItems="1" interval="5000" vertical="true" current='{{index}}' duration='1000' bindchange='change_box'>
      <swiper-item wx:for="{{list}}" wx:key="itemkey">
        <view class="scroll-bar-box" style="top: 0px;">
          <view class="li">
            <scroll-view class="container">
              <view class="scrolltxt">
                <view class="marquee_box">
                  <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">
                    <text style="margin-right:{{marquee_margin}}px;" wx:if='{{marquee_margin}}'></text>
                    <text class="buy-bb-nickname">{{item.text}}</text>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>

2.wxss

.buy-bb-fixed {
  position: absolute;
  top: 240rpx;
  height: 60rpx;
  /* border-radius: 30rpx; */
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  left: 0;
  line-height: 60rpx;
  width: 100%;
  /* padding-right: 30rpx; */
  z-index: 10;
  overflow: hidden;
  /* padding-left: 12rpx; *//* margin-left: 20rpx; */
}

.swiper_container {
  height: 60rpx;
  width: 100%;
}
.buy-bb-fixed .scroll-bar-box {
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.buy-bb-fixed .scroll-bar-box .li {
  height: 60rpx;
  box-sizing: border-box;
  white-space: nowrap;
}

.buy-bb-avatar {
  width: 42rpx;
  height: 42rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 10rpx;
  display: inline-block;
  vertical-align: middle;
}

.buy-bb-nickname {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10rpx;
  height: 60rpx;
  font-size: 14px;
}

.buy-bb-i {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10rpx;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.scrolltxt {
  padding: 0 20rpx;
}

.marquee_box {
  position: relative;
  height: 60rpx;
  display: block;
  overflow: hidden;
}

.marquee_text {
  white-space: nowrap;
  position: absolute;
  top: 0;
  font-size: 14px;
  height: 60rpx;
  line-height: 60rpx;
}

3.js

  data: {
   marqueePace: 0.75, //Rolling speed
    marqueeDistance: 0, //Initial rolling distance
    marquee_margin: 0,
    interval: 20, // Time interval,
    autoplay: false, //Controls whether the slider automatically scrolls
    index: 0 //Control slider to switch after text scrolling
  },
  //It can also be written in onLoad
  onReady() {
   // Page display
    var that = this;
    var list = []
    list.push({
      text: "This is the first scroll"
    }, {
      text: "This is the second scroll item, but I want to be very long, very long, very long, very long"
    }, {
      text: "This is the third scroll"
    }) //Add what you want
    var windowWidth = wx.getSystemInfoSync().windowWidth; // Screen width
    //console.log(length,windowWidth);
    that.setData({
      list,
      windowWidth: windowWidth
    });
    that.scrolltxt(list[0].text); // The first word disappears and immediately appears on the right
  },
  //The function that starts after the slider is switched to judge whether the next column of text needs to scroll
  change_box: function(e) {
    console.log(e.detail.current)
    this.setData({
      index: e.detail.current,
    })
    clearInterval(this.data.getInterval);//Turn off timer
    this.scrolltxt(this.data.list[e.detail.current].text)
  },

  //Function to control scrolling
  scrolltxt: function(e) {
    console.log(e)
    var that = this;
    var windowWidth = that.data.windowWidth; //Screen width
    var length = e.length * 14 + 10; //Width of scrolling text (plus margins)
    console.log(length, windowWidth)
    if (length > windowWidth) {
      that.data.getInterval = setInterval(function () {
        var maxscrollwidth = length + windowWidth; //The maximum width of scrolling, text width + spacing. If you need to scroll one line of text and then display the second line, you can modify the value of "marquee" to be equal to "windowWidth"
      var crentleft = that.data.marqueeDistance;
      if (crentleft < maxscrollwidth) { //Determine whether to scroll to the maximum width
        that.setData({
          autoplay: false, //It is forbidden for swiper to slide automatically. Switch after the text scrolls
          marquee_margin: windowWidth,
          marqueeDistance: crentleft + that.data.marqueePace
        })
      } else {
        // console.log("replace");
        var index = that.data.index //Currently sliding module
        if (that.data.index == that.data.list.length - 1) { //To judge whether it is the last block, you need to go back to the first block
          index = 0
        } else {
          index = index + 1
        }
        that.setData({
          autoplay: false,
          marquee_margin: windowWidth, //Let the text come out from the far right
          index,
          marqueeDistance: 0 // Direct scrolling
        });
        }
      }, that.data.interval);
    } else {
      that.setData({
        autoplay: true,
        marquee_margin: 10
      }); //The text is too short to scroll, so that swiper can slide automatically
    }
  },

Basically, it's finished. You can use it if you put it on directly. You can directly modify whatever style you want. If you have any questions, please leave a message below.