小程序轮播效果图
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)
}
}