用wepy写的一个关于小程序通知栏（公告栏）上下滚动效果实现

迈不过友情╰ 2023-06-10 13:23 2阅读 0赞

## 说明 ##

页面需要在顶部实现一个通知栏上下滚动的效果，对一些比较动态的信息做一个展示，一个比较实用的一个小效果。

其主要核心思路是利用了动画的原理，实现效果的平滑实现。

![在这里插入图片描述][20191027224708358.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>

js部分  
js动画部分有借鉴之前的前辈的思路。特此说明下。

https://blog.csdn.net/Archimelan/article/details/80324981  
大家有兴趣的可以去看下

data = {
    		contentList: ['刘德华于9:23，成功签约1单！', '杨紫于9:23，成功签约2单！', '林俊杰于9:23，成功签约3单！'],
            listI: -1,
            content: '欢迎进入小程序'
    	}
    	
        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.content = content
                this.$apply()
            }, 1000)
        }
    
    这里处理可能由于个人水平有限，实现的可能比较粗糙，可以留言指点我哈！
        getListInfo() {
            if (this.listI >= this.contentList.length - 1) {
                this.listI = -1
                this.getListInfo()
            } else {
                this.listI++
            }
            return this.contentList[this.listI]
        }
    
    setInterval(() => { this.update(this.getListInfo()) }, 3000)

css部分

.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;
            }
        }

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！

这里有一个使用原生小程序语法实现的一个一样效果的demo，有兴趣的可以去看下  
[https://blog.csdn.net/qq\_37131884/article/details/103896765][https_blog.csdn.net_qq_37131884_article_details_103896765]

[20191027224708358.gif]: /images/20230531/f5b19c3897254c6a84bf551e3b7edefd.png
[https_blog.csdn.net_qq_37131884_article_details_103896765]: https://blog.csdn.net/qq_37131884/article/details/103896765