前面写了一个wepy框架实现相同效果的,后面有朋友问我原生的怎么写,然后我就修改了下代码,实现了一个相同效果的demo
先上图
直接上代码,复制下就可以直接看效果了。
wxml部分
<view>
<view class="notification_bar">
<image class="bar_left" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1155895701,546127264&fm=26&gp=0.jpg" />
<view class="bar_text" animation="{{animationData}}">{{content}}</view>
</view>
</view>
wxss部分
.notification_bar {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
display: flex;
align-items: center;
padding: 0 30rpx;
height: 50rpx;
overflow: hidden;
background: #FFE4E4;
}
.bar_left {
width: 27rpx;
height: 25rpx;
}
.bar_text {
margin-left: 12rpx;
font-size: 12px;
color: #FF7777;
}
js部分
Page({
data: {
contentList: ['明明于9:23,成功查看了3次!', '红红于9:23,成功查看了5次!', '兰兰于9:23,成功查看了8次!'],
listI: -1,
content: '欢迎进入小程序'
},
onLoad: function(options) {
setInterval(() => { this.update(this.getListInfo()) }, 3000)
},
update(content) {
var that = this
var animation = wx.createAnimation()
// 旧消息向上平移
animation.translateY(-30).step({
duration: 1000,
timingFunction: 'ease-in'
})
// 为了实现下一条新内容向上平移的效果,必须把内容很快平移到下方,并且不能被用户看见,这里其原理类似轮播图的思路。
// 实现方法:动画时间设置为1ms,过渡效果设置为’动画第一帧就跳至结束状态直到结束‘
animation.opacity(0).translateY(30).step({
duration: 1,
timingFunction: 'step-start'
})
// 新消息向上平移的同时恢复透明
animation.opacity(1).translateY(0).step({
duration: 1000,
timingFunction: 'ease-out'
})
that.setData({
animationData: animation.export()
})
// 更新内容的延时必须大于第一步动画时间
setTimeout(() => {
that.setData({
content: content
})
}, 1000)
},
getListInfo() {
if (this.data.listI >= this.data.contentList.length - 1) {
this.data.listI = -1
this.getListInfo()
} else {
this.data.listI++
}
return this.data.contentList[this.data.listI]
}
})
个人水平有限,有问题欢迎大家留言指导,仅供学习和参考。
学海无涯!努力二字,共勉!
前面有用wepy框架写的一个类似效果,逻辑上都是一样的,只不过他们的语法可能有点差别,有兴趣的可以去看下
https://blog.csdn.net/qq_37131884/article/details/102773161