小程序基于定时器的无限滚动列表和CSS3动画滚动的地球

随手写的小玩意，两个无限滚动动画。

效果图：

话不多说直接上代码:

wxml文件

  <view class="swiper-tip" >
    <view class="swiper-item-sup" style="top:-{{moveTop}}px;" id="swiper-item-sup">
      <view class="swiper-tip-item" wx:for="{{persons}}" wx:key="{{item.Name}}">
        {{item.Name + "点亮了" + item.City}}
      </view>
      <view class="swiper-tip-item" wx:for="{{persons}}" wx:key="{{item.Name}}">
        {{item.Name + "点亮了" + item.City}}
      </view>
    </view>
  </view>

  <view class="bottomView">
    <view class="earthView">
      <view class="earthPicView">
        <image class="earthPicBottom" src="../resources/earth_bottom.png"></image>
        <image class="earthPicBottom" src="../resources/earth_bottom.png"></image>
      </view>
      <image class="earthPic" src="../resources/earth_top.png"></image>
      <text class="earthLength">40076KM</text>
      <text class="runLength">{{0}}KM</text>
      <text class="numRound">{{0}}圈</text>
    </view>
  </view>

js文件：

//index.js
//获取应用实例
const app = getApp()

var timer = null;

Page({
  data: {
    persons:[],
    moveTop: 0,
  },
  onLoad: function (options) {
  },
  onShow: function () {
    //模拟获取数据
    this.getHomeData();
    
  },
  getHomeData() {
    var persons = [{ Name: "徐老师1", City: "北京市" }, { Name: "徐老师2", City: "北京市" }, { Name: "徐老师3", City: "北京市" }, { Name: "徐老师4", City: "北京市" }, { Name: "徐老师5", City: "北京市" }, { Name: "徐老师6", City: "北京市" }, { Name: "徐老师7", City: "北京市" }, { Name: "徐老师8", City: "北京市" }, { Name: "徐老师9", City: "北京市" }, { Name: "徐老师10", City: "北京市" }]

    this.setData({
      persons:persons
    })
    this.beginAnimation();
  },
  beginAnimation() {
    var that = this;
    var query = wx.createSelectorQuery();
    var moveTop = 0;
    clearInterval(timer);
    timer = null;
    //选择id
    query.select('#swiper-item-sup').boundingClientRect(function (rect) {
      console.log(rect)
      if (rect.height < 82) {
        return;
      }

      timer = setInterval(() => {
        moveTop += 1;
        if (moveTop > rect.height / 2) {
          moveTop = 0;
        }
        that.setData({
          moveTop: moveTop
        })
      }, 50)
    }).exec();
  }
})

wxss文件如下：

/**index.wxss**/

page{
  background-color: #fff;
}

.bottomView{
  position: relative;
}
.earthView{
  margin-top: 20rpx;
  width: 690rpx;
  height: 690rpx;
  position: relative;
  left: 30rpx;
  overflow: hidden;
}
.earthView .earthPicView{
    position: absolute;
    left: 56rpx;
    top: 50rpx;
    height: 545rpx;
    width: 2500rpx;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    animation: leftAnimation 10s linear infinite;
}
@keyframes leftAnimation{ 
    0% {
      left: 56rpx;
    }
    100% {
      left: -1195rpx;
    }
} 
.earthView .earthPicBottom{
  display: block;
  width: 1275rpx;
  height: 545rpx;
  max-width: 1275rpx;
}
.earthView .earthPic{
  display: block;
  width: 690rpx;
  height: 690rpx;
  position: absolute;
  left: 0;
  top: 0;
}
.earthView .earthLength{
  position: absolute;
  left: 50%;
  top: 55%;
  color: white;
  display: inline-block;
  transform: translate(-50%, -50%);
}
.earthView .runLength{
  position: absolute;
  left: 50%;
  top: 65.5%;
  color: white;
  display: inline-block;
  transform: translate(-50%, -50%);
}
.earthView .numRound{
  width: 125rpx;
  height: 50rpx;
  line-height: 50rpx;
  position: absolute;
  text-align: center;
  right: 0%;
  top: 60.2%;
  color: white;
  display: inline-block;
}
.swiper-tip{
  position: relative;
  left: 30rpx;
  top: 0;
  height: 150rpx;
  width: 400rpx;
  overflow: hidden;
}
.swiper-item-sup{
  position: absolute;
  left: 0;
  top: 0;
}
.swiper-tip-item{
  background-color: #A8061A;
  color: #fff;
  border-radius: 25rpx;
  padding: 10rpx 30rpx;
  line-height: 30rpx;
  width: 300rpx;
  overflow: hidden;
  margin-top: 10rpx;
}

demo地址：
https://download.csdn.net/download/weixin_46602773/12275555