微信小程序顶部上下轮播公告的两种实现

第一种swiper组件，没什么可说的
第二种使用动画

playNoticeAnimation: function (t) {
    // 获取一堆数据，随机展示
    var randomInfo = ['小苹果 提现1元现金', '随遇而安 提现5元现金', '阿涛 提现1元现金', '小龙女 提现10元现金', 'ye zhe tian 提现20元现金', '王大春 提现3元现金', '三生三世 提现5元现金'];
    var len = randomInfo.length;
    setInterval(function () {
      i++;
      if (i >= len) {
        i = 0;
      }
      !that.animation && (that.animation = wx.createAnimation());
      var e = that.animation;
      e.translateY("-150%").step({
        duration: 300,
        timingFunction: "ease-in"
      }), e.opacity(0).translateY("150%").step({
        duration: 1,
        timingFunction: "step-start"
      }), e.opacity(1).translateY(0).step({
        duration: 300,
        timingFunction: "ease-out"
      }), that.setData({
        noticeAnimation: e.export()
      }), t && setTimeout(t, 300);
      setTimeout(function(){
        that.setData({
          random_gg: randomInfo[i]
        })
      },300)

    }, 3000)
  },