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

第一种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)
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容