原生小程序WEUI导航背景随滚动条渐变色

原理：根据小程序提供的滚动条 API 事件，进行不断检测滚动值，然后通过滚动值，进行计算，将rgba 的透明度由透明改变成不透明，最终实现 渐变的效果 。

wxml 文件

	<!-- 导航栏 -->
	<mp-navigation-bar class="mp-navigation" show="{{true}}" animated="{{true}}" back="{{false}}" color="#333" background="rgba(0, 0, 0,{{scrollTop / 400 > 0.9 ? 1 : scrollTop / 400}})">
		<view slot="left" class="mp-navigation-bar-logo">
            左侧箭头
		</view>
	</mp-navigation-bar>

index.js文件 

import { throttle } from "../../utils/util.js"  // 节流函数
Page({
	/**
	 * 页面的初始数据
	 */
	data: {
		scrollTop: 0
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function () { },

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function () { },

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function () { },
    // 通过节流事件将 滚动条频繁的事件触发，改成每隔一段事件进行触发。防止多次触发
	onPageScroll: throttle(function(e) {
		if (e.scrollTop>0) {
			this.setData({
				state: false,
				scrollTop: e.scrollTop
			})
		}else {
			this.setData({
				state: true,
				scrollTop: e.scrollTop
			})
		}
	}, 100)
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	// onPullDownRefresh: function () {},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	// onReachBottom: function () {},

	/**
	 * 用户点击右上角分享
	 */
	// onShareAppMessage: function () {}
});

节流函数，可以自己新建一个 文件专门用于存储这种工具函数，方便其他模块进行使用。 

/*函数节流*/
export function throttle(fn, wait) {
  var timer = null;
  var last = null;
  return function () {
    var context = this;
    var args = arguments;
    last = [...args]
    if (!timer) {
      timer = setTimeout(function () {
        fn.call(context, ...last);
        timer = null;
        // last = null;
      }, wait)
    }
  }
}