用wepy寫的一個關於小程序通知欄（公告欄）上下滾動效果實現

說明

頁面需要在頂部實現一個通知欄上下滾動的效果，對一些比較動態的信息做一個展示，一個比較實用的一個小效果。

其主要核心思路是利用了動畫的原理，實現效果的平滑實現。

代碼實現

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