小程序文字滚动

 
    //wxml 部分 
    <view class="m_winnersbox">
<view class='ul' style="transform: translateY(-{{marqueeDistance}}rpx)">
<view class='li' wx:for="{{winnersbox}}">{{item.mobile}} <text>{{item.texte}}</text></view>
</view>
</view> 
    
//js部分
Page({

  /**
   * 页面的初始数据
   */
  data: {
    marqueeDistance:0,//滚动距离
    maxscrollheight:'',//最大高度
    liheight:'40',//一个li的高度
    winnersbox:[
      {
        mobile:'131****3175', 
        texte:'抽中了 10元平台优惠券',
      }, 
      {
        mobile: '131****3175',
        texte: '抽中了 15元平台优惠券',
      },
      {
        mobile: '131****3175',
        texte: '抽中了 20元平台优惠券',
      },
      {
        mobile: '131****3175',
        texte: '抽中了 30元平台优惠券',
      },
      {
        mobile: '131****3175',
        texte: '抽中了 40元平台优惠券',
      },
      {
        mobile: '131****3175',
        texte: '抽中了 50元平台优惠券',
      },
      ],
 
  },


//文字滚动效果
  autoScroll: function (that) {
    var interval = setInterval(function () { 
      let height = that.data.winnersbox.length * that.data.liheight;
      if (that.data.marqueeDistance == 120){
        that.setData({
          marqueeDistance: 0
        })
        return;
      }
      if (that.data.marqueeDistance < height){
        that.setData({
          maxscrollheight: height,//保存最大的高度
          marqueeDistance: that.data.marqueeDistance + 40,
        })
      }else{
        that.setData({
          marqueeDistance:0
        })
        clearInterval(interval);
        that.autoScroll();
      }
    },3000)
  },
}) 
   
猜你喜欢
