1. 程式人生 > >小程式——動態修改狀態列文字顏色/背景/動畫及頁面樣式

小程式——動態修改狀態列文字顏色/背景/動畫及頁面樣式

初次開發小程式,很多東西都是一邊百度一邊摸索學習,這幾天收穫還是很大的。

小程式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'
          }
        })
      }
  },