小程式——動態修改狀態列文字顏色/背景/動畫及頁面樣式
阿新 • • 發佈:2019-01-28
初次開發小程式,很多東西都是一邊百度一邊摸索學習,這幾天收穫還是很大的。
小程式API真的應該好好地去學習一遍吶,熟悉API的屬性,再百度各位前輩大佬的例子,那就很容易上手了。
現在又開始學習了,感覺很不錯,每天進步一點點也是好的。
.wxml:
<view class="page__hd pagehead" style="background:{{bgColor}}">
<view class="page__title titlebox">標題</view>
</view>
部分js:
data: { bgColor:"1296db",//樣式開始預設顏色 userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), inputShowed: false, inputVal: "" }, //監聽頁面滾動事件修改標題顏色及頁面樣式 onPageScroll: function (e) { var that = this; console.log(e);//{scrollTop:99} if (e.scrollTop>70){ this.setData({ bgColor: "#666" }); wx.setNavigationBarColor({ frontColor: '#000000', backgroundColor: '#ccc', animation: { duration: 30, timingFunc: 'linear' } }); }else{ this.setData({ bgColor: "#1296db" }); wx.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: '#ffffff', animation: { duration: 50, timingFunc: 'linear' } }) } },