小程序——动态修改状态栏文字颜色/背景/动画及页面样式

初次开发小程序，很多东西都是一边百度一边摸索学习，这几天收获还是很大的。

小程序API真的应该好好地去学习一遍呐，熟悉API的属性，再百度各位前辈大佬的例子，那就很容易上手了。

现在又开始学习了，感觉很不错，每天进步一点点也是好的。

小程序 https://developers.weixin.qq.com/miniprogram/dev/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'
          }
        })
      }
  },