小程序滚动文字跑马灯

小程序文字滚动跑马灯

预期是做一个可以让文字滚动播放完之后再去切换下一条，所以我去找了一些网上的代码整合自己的想法，然后再配合小程序的***swiper***组件，弄出来的效果。

1. wxml

 <!-- 跑马灯 -->
  <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, //滚动速度
    marqueeDistance: 0, //初始滚动距离
    marquee_margin: 0,
    interval: 20, // 时间间隔,
    autoplay: false, //控制滑块是否自动滚动
    index: 0 //控制滑块在文字滚动完之后切换
  },
  //在onLoad写也可以
  onReady() {
   // 页面显示
    var that = this;
    var list = []
    list.push({
      text: "这是滚动的第一条"
    }, {
      text: "这是滚动的第二条，但是我要很长很长很长很长很长很长很长很长"
    }, {
      text: "这是滚动的第三条"
    }) //添加你想要的内容
    var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕宽度
    //console.log(length,windowWidth);
    that.setData({
      list,
      windowWidth: windowWidth
    });
    that.scrolltxt(list[0].text); // 第一个字消失后立即从右边出现
  },
  //滑块切换后出发的函数，用来判断下一列文字是否要滚动
  change_box: function(e) {
    console.log(e.detail.current)
    this.setData({
      index: e.detail.current,
    })
    clearInterval(this.data.getInterval);//关掉定时器
    this.scrolltxt(this.data.list[e.detail.current].text)
  },

  //控制滚动的函数
  scrolltxt: function(e) {
    console.log(e)
    var that = this;
    var windowWidth = that.data.windowWidth; //屏幕宽度
    var length = e.length * 14 + 10; //滚动文字的宽度（加上边距）
    console.log(length, windowWidth)
    if (length > windowWidth) {
      that.data.getInterval = setInterval(function () {
        var maxscrollwidth = length + windowWidth; //滚动的最大宽度，文字宽度+间距，如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可
      var crentleft = that.data.marqueeDistance;
      if (crentleft < maxscrollwidth) { //判断是否滚动到最大宽度
        that.setData({
          autoplay: false, //禁止swiper自动滑动，等文字滚动完再切换
          marquee_margin: windowWidth,
          marqueeDistance: crentleft + that.data.marqueePace
        })
      } else {
        // console.log("替换");
        var index = that.data.index //当前滑动的模块
        if (that.data.index == that.data.list.length - 1) { //判断是否是最后一块，需要回到首块
          index = 0
        } else {
          index = index + 1
        }
        that.setData({
          autoplay: false,
          marquee_margin: windowWidth, //让文字从最右边出来
          index,
          marqueeDistance: 0 // 直接重新滚动
        });
        }
      }, that.data.interval);
    } else {
      that.setData({
        autoplay: true,
        marquee_margin: 10
      }); //文字太短不滚动文字，让swiper自动滑动
    }
  },

基本上也就弄完了，直接套上就可以用，具体要什么样式就直接去修改，有什么问题欢迎在下方留言。