原生小程序语法写的小程序通知栏（公告栏）上下滚动效果实现

男娘i 2023-06-28 11:06 6阅读 0赞

前面写了一个wepy框架实现相同效果的，后面有朋友问我原生的怎么写，然后我就修改了下代码，实现了一个相同效果的demo

先上图  
![在这里插入图片描述][20200108191532504.gif]

直接上代码，复制下就可以直接看效果了。

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][https_blog.csdn.net_qq_37131884_article_details_102773161]

[20200108191532504.gif]: https://img-blog.csdnimg.cn/20200108191532504.gif
[https_blog.csdn.net_qq_37131884_article_details_102773161]: https://blog.csdn.net/qq_37131884/article/details/102773161