當(dāng)我發(fā)現(xiàn)微信小程序有這個(gè)效果的時(shí)候 我的內(nèi)心是這兩個(gè)字:臥 倒 草 地,(對(duì),兩個(gè)字)
效果就是如圖所示:

2019-11-23 202108.gif
我的思路是 監(jiān)聽頁面滾動(dòng),超過一定高度,改變顏色。甚至還可以改標(biāo)題的文案。其實(shí)就是滾動(dòng) 結(jié)合 修改 標(biāo)題的api實(shí)現(xiàn)
核心js代碼如下
page({
...
...
/**
* 監(jiān)聽用戶滑動(dòng)頁面事件--返回頁面在垂直方向已滾動(dòng)的距離(單位px)
*/
onPageScroll(e){
// console.log(e.scrollTop);
if(e.scrollTop>50){ //這里的滾動(dòng)數(shù)值,就看具體需求了
wx.setNavigationBarTitle({
title:"hi~"
})
wx.setNavigationBarColor({
frontColor: '#ffffff', // 必寫項(xiàng)
backgroundColor:"#0e0e0e", // 傳遞的顏色值
animation: { // 可選項(xiàng) 這里實(shí)現(xiàn) 過度效果 太好了
duration: 400,
timingFunc: 'easeIn'
}
})
}else{
wx.setNavigationBarTitle({
title:"當(dāng)下"
})
wx.setNavigationBarColor({
frontColor: '#ffffff', // 必寫項(xiàng)
backgroundColor:"#3a3a3a", // 傳遞的顏色值
animation: { // 可選項(xiàng)
duration: 400,
timingFunc: 'easeIn'
}
})
}
}
})