說明
頁面需要在頂部實現一個通知欄上下滾動的效果,對一些比較動態的信息做一個展示,一個比較實用的一個小效果。
其主要核心思路是利用了動畫的原理,實現效果的平滑實現。
代碼實現
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