微信小程序之单行文本轮播

借鉴总结下

  <view class="tongzhi">
    <image src="/pages/images/ce_tongzhi.png"></image>
    <view class='scroll_notice'>
      <scroll-view>
          <view class="scroll_notice_item_bg" style="transform: translateX(-{{marqueeDistance}}px)">//transform: -translateX()移动元素，x负方向移动
            <view class='scroll_notice_item'>{{bofang}}</view>
        </view>
      </scroll-view>
    </view>
  </view>

.tongzhi {
  height: 80rpx;
  background-color: #69bea9;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  justify-content: space-between;
}

.tongzhi image {
  width: 34rpx;
  height: 34rpx;
  flex-shrink: 0;
}

.scroll_notice {
  position: absolute;
  right: 0rpx;
  top: auto;
  width: 90%;
  white-space: nowrap;
}
.scroll_notice_item {
  font-size: 24rpx;
  letter-spacing: 1rpx;
  text-align: left;
  color: #666;
  height: 80rpx;
  line-height: 80rpx;
}

.scroll_notice_item_bg {
  position: relative;
  margin-left: 20rpx;
  height: 100%;
  display: inline-flex;
}

  data: {
      bofang: '全国快递本月底将陆续停运，各位请注意补货时间国快递本月底将陆续停运，撒旦立刻恢复了是的哈里发顺利打开分厘卡士大夫立刻但是数量的会计分录圣诞节，',
    size:14,//字体大小
    windowWidth :'',//屏幕宽度
    length:'',//当前字体所占的长度
    interval: 20 ,//时间
    marqueePace: 1,//滚动速度
    marqueeDistance: 0,//初始滚动距离
    marquee_margin: 0,
    timer: '', //定时器名字
},
  onShow: function() {
    var that = this;
    var windowWidth = wx.getSystemInfoSync().screenWidth;//获取当前屏幕宽度
    var length = that.data.bofang.length * that.data.size;//文字长度
    console.log(length);
    that.setData({
      length: length,
      windowWidth: windowWidth
    });
  	clearInterval(that.data.timer);//清除计时器，一定要清除
    that.scrolltxt();// 第一个字消失后立即从右边出现
},

  //一行文字轮播,创建函数
  scrolltxt: function () {
    var that = this;
    var length = that.data.length;//滚动文字的宽度
    var windowWidth = that.data.windowWidth;//屏幕宽度
    if (length > windowWidth) {//如果文字宽度大于屏幕宽度
      that.data.timer = setInterval(function () {//创建函数
        var maxscrollwidth = length + that.data.marquee_margin;//滚动的最大宽度，文字宽度+间距，如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可
        var crentleft = that.data.marqueeDistance;//获取初始滚动距离
        if (crentleft < maxscrollwidth) {//判断是否滚动到最大宽度
          that.setData({
            marqueeDistance: crentleft + that.data.marqueePace//滚动的距离为当前滚动的距离+滚动速度（1）
          })
        }
        else {//到最大宽度
          that.setData({
            marqueeDistance: 0 // 直接重新滚动
          });
          clearInterval(that.data.timer);//清除计时器
          that.scrolltxt();
        }
      }, that.data.interval);//设定时间
    }
    // else {
    //   that.setData({ marquee_margin: "1000" });//只显示一条不滚动右边间距加大，防止重复显示
    // }
  },