JS系列——通知中心消息推送

最近APP要实现查看通知中心消息推送的功能:


项目使用Vue,数据来源于native客户端,进入通知列表页面需要直接滚动到最后一条信息列表,

基于此,我们可以想到scrollTo(x,y)方法,给y值一个超大值,那么页面就会滚到内容的最下面。


那么这样做有什么问题呢?测试中,我们发现打开页面并没有直接滚动到页面底部,这是因为vue从挂载对象到渲染数据有一个过程。


所以,我们把scrollTo()方法放在Vue的mounted()函数中,虽然这样做解决了未能滚动到页面底部的问题,但是出现了加载页面会闪一下的问题,所以,我们有了新的解决方案:进入页面显示loading菊花,在拿到数据的回调函数中,待页面数据渲染完成之后调用scrollTo()方法,然后隐藏菊花加载状态。当然。这要用到setTimeout(() => {}, ms)函数了,自己设一个合适的时间。


好了,现在就可以实现原生推送最新消息的效果了,但是  如果推送消息有图片呢?我们知道页面加载图片是需要时间的,所以,我们一定要给图片一个最小高度,min-width值。


大功告成,一个简单的推送效果。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值