小程序文字循环滚动效果

一、上下滚动效果

实现方法：利用小程序组建swiper实现上下循环滚动（为了美观，wxss中我增加了高度和背景色）。

• wxml

<swiper class='swiper-box' autoplay='{{true}}' interval='2000' vertical='{{true}}' circular='{{true}}'>
  <swiper-item class='item' wx:for='{{txtlist}}'>{{index + 1}}、{{item}}</swiper-item>
</swiper>

• wxss

.swiper-box{
  position: relative;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 40rpx;
  background-color: #FFEBCD;
  overflow: hidden;
}
.swiper-box .item{
  white-space: nowrap;
  text-overflow: ellipsis;
}

• js

Page({
  data: {
    txtlist: [
      '这是第一条公告内容',
      '小程序上下滚动效果总结',
      '这是一行上下滚动的文字，文字最好短点，超过一行省略'
    ]
  }
})

---

二、水平滚动效果

实现方法：下面我总结了三种方法：1）是利用CSS3中keyframes实现的，效果是文字从屏幕右边开始向左滚动；2）文字从屏幕左边向左滚动，滚动完成后从屏幕右边开始再向左滚动，以此循环；3）文字展示两次，两段文字之间设置适当的间距，从右向左开始滚动，当第二条文字滚动到屏幕左边时设置重新滚动。

• wxml

<view class='wp'>
  <!-- 纯css实现 -->
  <view class='box'>
    <view id='txt1' class='txt' style='animation: roll linear {{duration}}s infinite;'>{{text}}</view>
  </view>
  <!-- 显示完后再显示 -->
  <view class='box'>
    <view id='txt2' class='txt' style='left: {{posLeft1}}px'>{{text}}</view>
  </view>
  <!-- 出现空白后就显示 -->
  <view class='box'>
    <view class='flex-box' style='left: {{posLeft2}}px'>
      <view id='txt3' class='txt'>{{text}}</view>
      <view class='txt' style='margin-left: {{marginLeft}}px'>{{text}}</view>
    </view>
  </view>
</view>

• wxss

.box{
  position: relative;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  overflow: hidden;
}

.txt{
  white-space: nowrap;
}

#txt1{
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  transition: left 1s linear;
}

#txt2,.flex-box{
  position: absolute;
  top: 0;
}

.flex-box{
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

@keyframes roll {
  0% {left: 750rpx;}
  100% {left: -100%;}
}

• js

let interval1,interval2;

Page({
  data: {
    text: '这是一行文字水平滚动效果，在小程序中实现的', //滚动文字
    duration: 0, //水平滚动方法一中文字滚动总时间
    pace: 1,  //滚动速度
    posLeft1: 0,  //水平滚动方法二中left值
    posLeft2: 0,  //水平滚动方法三中left值
    marginLeft: 60   //水平滚动方法三中两条文本之间的间距
  },
  roll1: function (that, txtLength, windowWidth) {
    interval1 = setInterval(function() {
      if (-that.data.posLeft1 < txtLength) {
        that.setData({
          posLeft1: that.data.posLeft1 - that.data.pace
        })
      } else {
        that.setData({
          posLeft1: windowWidth
        })
      }
    }, 20)
  },
  roll2: function (that, txtLength, windowWidth) {
    interval2 = setInterval(function () {
      if (-that.data.posLeft2 < txtLength + that.data.marginLeft) {
        that.setData({
          posLeft2: that.data.posLeft2 - that.data.pace
        })
      } else { // 第二段文字滚动到左边后重新滚动
        that.setData({
          posLeft2: 0
        })
        clearInterval(interval2);
        that.roll2(that, txtLength, windowWidth);
      }
    }, 20)
  },
  onShow: function () {
    let that = this;
    let windowWidth = wx.getSystemInfoSync().windowWidth; //屏幕宽度
    wx.createSelectorQuery().select('#txt1').boundingClientRect(function (rect) {
      let duration = rect.width * 0.03;//滚动文字时间,滚动速度为0.03s/px
      that.setData({
        duration: duration
      })
    }).exec()

    wx.createSelectorQuery().select('#txt2').boundingClientRect(function (rect) {
      let txtLength = rect.width;//滚动文字长度
      that.roll1(that, txtLength, windowWidth);
    }).exec()

    wx.createSelectorQuery().select('#txt3').boundingClientRect(function (rect) {
      let txtLength = rect.width;//文字+图标长度
      that.setData({
        marginLeft: txtLength < windowWidth - that.data.marginLeft ? windowWidth - txtLength : that.data.marginLeft
      })
      that.roll2(that, txtLength, windowWidth);
    }).exec()
  },
  onHide: function() {
    clearInterval(interval1);
    clearInterval(interval2);
  }
})