微信小程序仿淘宝，向下滚动，头部导航栏背景由透明编程白色（animate）

开发电商类的小程序过程中，有很多导航栏在滑动的时候背景色渐变，下面就来实现一下：

借助小程序的animate方法实现过渡效果，只不过目前这一功能只能绑定scroll-view元素。

1.wxml页面

<scroll-view
  id="scrollBox"
  class="view-page"
  scroll-y="{{true}}"
  throttle="{{false}}"
  enhanced="{{true}}"
  binddragstart="scrollStart"
  bindscrolltoupper="scrollToUp"
  >  
  <view class="navbar custom-class" style='height:{{navHeight}}px;'>
    <button class="navbtn back" bindtap="_navBack" style='top:{{navTop}}px;' >
      <text class="iconfont icon-jiantou-left"></text>
    </button>
    <view class='navbar-title' style='top:{{navTop}}px;'>通告详情</view>
  </view>
</scroll-view>

2.js页面

_animate() {
    wx.createSelectorQuery().select('#scrollBox').fields({
      scrollOffset: true,
      size: true,
    }, (res) => {
      //为每个元素添加过渡动画
      this.animate('.navbar', [{
        backgroundColor: 'transparent'
      }, {
        backgroundColor: '#ffffff'
      }], 1000, {
        scrollSource: '#scrollBox',
        timeRange: 1000,
        startScrollOffset: 0,
        endScrollOffset: 40,
      }),
      this.animate('.back', [{
        color: '#fff',
        backgroundColor: 'rgba(0, 0, 0, 0.4)'
      }, {
        color: '#333',
        backgroundColor: 'transparent'
      }], 1000, {
        scrollSource: '#scrollBox',
        timeRange: 1000,
        startScrollOffset: 0,
        endScrollOffset: 40,
      }),
      this.animate('.navbar-title', [{
        opacity: '0',
      }, {
        opacity: '1',
      }], 1000, {
        scrollSource: '#scrollBox',
        timeRange: 1000,
        startScrollOffset: 0,
        endScrollOffset: 40,
      })
    }).exec()
},

附加功能：

在滑动的时候有时候需要动态改变时间栏的颜色，这就需要监听scroll-view的滚动情况，bindscrolltoupper可以监听滚动到顶部时的回调事件，binddragstart可以监听滚动开始时的回调事件，此方法需要借助enhanced={{true}}时才有效果（小程序开发工具中没有效果，但在真机测试中有效果，至今不知道为什么）

//滚动开始改变时间栏颜色
scrollStart: function () {
    wx.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: 'transparent'
    })
},
//滚动到顶部改变时间栏颜色
scrollToUp: function () {
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: 'transparent',
    })
},

好了，一个仿淘宝的滚动渐变导航栏就完成了！

完整案例