微信小程序—自定义导航栏（上划导航栏渐变）

摘要

最近在体验小程序的时候，总会遇到一种自定义导航栏，随着上划的动作，颜色逐渐变化，思考后，自己实现一下

效果

体验

体验路径：自定义系列>导航栏

代码

分为页面和组件两部分

页面部分

js

let navigationBar
Page({
  onLoad: function (options) {
    navigationBar = this.selectComponent("#navigationBar")
  },

  back2home(){
    wx.navigateBack({
      delta: 1,
    })
  },
  onPageScroll: function (e) {
    var scrollTop = e.scrollTop
    navigationBar.setOpacity(scrollTop,200)
  }
})

json

{
  "usingComponents": {
    "navigationBar":"utils/navigationBar/navigationBar"
  },
  "navigationStyle": "custom"
}

wxml

<view class="container">
  <navigationBar id="navigationBar"></navigationBar>
  <view class="view-row" style="color:#aaa;font-size:36rpx;margin:30rpx;border-bottom:1rpx solid #aaa;padding:10rpx">custom-自定义导航栏</view>
  <view style="font-size:32rpx;color:#aaa">上划改变导航栏样式</view>
  <image style="width:500rpx;height:800rpx;border-radius:20rpx;margin-top:20rpx" src="cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/00015.jpg"></image>
  <image style="width:500rpx;height:350rpx;border-radius:20rpx;margin-top:20rpx" src="cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/00015.jpg"></image>
  <image style="width:500rpx;height:600rpx;border-radius:20rpx;margin-top:20rpx" src="cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/meinv/00015.jpg"></image>
</view>

组件部分
js

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    menuButtonBoundingClientRect:{},
    systemInfo:{},
    opacity:0
  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () {
      var that = this
      wx.getSystemInfo({
        success: function(res) {
          that.setData({
            systemInfo: res,
            menuButtonBoundingClientRect: wx.getMenuButtonBoundingClientRect()
          })
          console.log(that.data.systemInfo)
        },
      })
    },
    hide: function () { },
    resize: function () { },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    setOpacity:function(scrollTop,maxTop){
      var opacity = 0
      if(scrollTop<=maxTop){
        opacity = scrollTop/maxTop
      }else{
        opacity = 1
      }
      this.setData({
        opacity:opacity
      })
    },
    back2home:function() {
      wx.navigateBack({
        delta: 1,
      })
    },
  }
})

json

{
  "component": true,
  "usingComponents": {}
}

wxml

<view class="container">
  <view class="view-navigation-bg" style="width:{{systemInfo.windowWidth}}px;height:{{menuButtonBoundingClientRect.bottom+10}}px;opacity:{{opacity}}">
  </view>
  <view class="view-navigation-container" style="width:{{systemInfo.windowWidth}}px;height:{{menuButtonBoundingClientRect.bottom+10}}px;">
    <image class="image-navigation-back" src="../home.png" style="width:{{menuButtonBoundingClientRect.height-10}}px;height:{{menuButtonBoundingClientRect.height-10}}px;padding:5px;margin-left:10px;top: {{menuButtonBoundingClientRect.top}}px;" catchtap="back2home"></image>
  </view>
  <view style="width:{{systemInfo.windowWidth}}px;height:{{menuButtonBoundingClientRect.bottom+10}}px;">
  </view>
</view>

wxss

.view-navigation-bg{
  background: rgb(247, 196, 28);
  position: fixed
}
.view-navigation-container{
  position: fixed
}
.image-navigation-back{
  position: absolute;
  left: 0
}

程序员不易，鼓励一下！