小程序文字上下轮播

小程序轮播效果图

html

<view class="notice-box" style="background:#9c8ae5;color:white">
  <view class="{{notice_one_class}}">{{notice_one}}</view>
  <view class="{{notice_two_class}}">{{notice_two}}</view>
</view>

js

// index.js
// 获取应用实例
const app = getApp()
let timer;
Page({
  data: {
    // 这里是一些组件内部数据
    activeIndex: 0,
    notice_one: '',
    notice_two: '',
    notice_one_class: 'noticeTop',
    notice_two_class: 'noticeBot',
    noticeList: ["恭喜 t****0 领到 0.1 元红包，快来一起领", "恭喜 t****2 领到 0.2 元红包，快来一起领", "恭喜 t****1 领到 0.3 元红包，快来一起领", "恭喜 卷****孩 领到 0.1 元红包，快来一起领", "恭喜 t****3 领到 0.3 元红包，快来一起领", "恭喜 s****1 领到 0.3 元红包，快来一起领", "恭喜 t****8 领到 0.1 元红包，快来一起领", "恭喜 夕****果 领到 0.1 元红包，快来一起领", "恭喜 t****9 领到 0.4 元红包，快来一起领", "恭喜 t****0 领到 0.4 元红包"], //文字数组
  },

  onLoad() {
    this.noticeStart();
  },
  // 这里是一个自定义方法
  noticeStart: function () {
    timer = setInterval(() => {
      let activeIndex = this.data.activeIndex + 1 >= this.data.noticeList.length ? 0 : this.data.activeIndex + 1;
      this.setData({
        notice_two: this.data.noticeList[activeIndex],
        activeIndex,
        notice_one_class: 'noticeTop fadeOutTop',
        notice_two_class: 'noticeBot fadeInBottom'
      })
      setTimeout(() => {
        this.setData({
          notice_one: this.data.notice_two,
          notice_one_class: 'noticeTop',
          notice_two_class: 'noticeBot'
        })
      }, 500)
    }, 2000);
  }
})

css

		.notice-box {
	  line-height: 56rpx;
	  font-size: 30rpx;
	  text-align: center;
	  color: #fff;
	  position: relative;
	  overflow: hidden;
	  height: 50rpx;
	  margin: 0 18rpx 18rpx;
	  border-radius: 18rpx;
	}

	.noticeTop {
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 50rpx;
	  line-height: 56rpx;
	  text-align: center;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  font-size: 26rpx;
	}

	.noticeBot {
	  position: absolute;
	  left: 0;
	  top: 42rpx;
	  width: 100%;
	  height: 50rpx;
	  line-height: 56rpx;
	  text-align: center;
	  opacity: 0;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  font-size: 26rpx;
	}

	.fadeOutTop {
	  animation: fadeOutTop 0.5s ease-out 1 forwards;
	}

	.fadeInBottom {
	  animation: fadeInBottom 0.5s ease-in 1 forwards;
	}

	@keyframes fadeOutTop {
	  0% {
	    opacity: 1;
	    transform: translateY(0);
	  }
	  100% {
	    opacity: 0;
	    transform: translateY(-42rpx);
	  }
	}

	@keyframes fadeInBottom {
	  0% {
	    opacity: 0;
	    transform: translateY(0px);
	  }
	  100% {
	    opacity: 1;
	    transform: translateY(-42rpx)
	  }
	}