微信小程序：随页面滚动渐变的顶部导航组件

需求：
进入页面时，没有导航栏，随着页面向上滚动，滚动条透明度逐渐变清晰，最后全部展示出来。
随着页面向下滚动，导航栏再逐渐消失

思路：
一个fixed定位的导航栏组件，外部传入opacity来控制css属性来控制透明度。
页面使用时，在onPageScroll里用throttle防抖方法在滚动时改变opacity

核心代码：

// gradient-bar.js
const { SDKVersion, version, statusBarHeight } = wx.getSystemInfoSync();
Component({
  properties: {
    opacity: Number, // 透明度
    title: String, // 导航标题
    showBackBtn: {
      type: Boolean,
      value: false
    },
    textColor: {
      type: String,
      value: '#333'
    },
    sticky: {
      type: Boolean,
      value: true
    }
  },
  data: {
    top: 0,
    showBack: false,
    showBar: false
  },
  attached() {
    const pages = getCurrentPages();
    const { showBackBtn } = this.data;

    this.setData({
      showBack: showBackBtn && pages && pages.length > 1,
      top: statusBarHeight, // top值为了让自定义导航把顶部信号栏的高度撑开，防止重叠
      showBar
    });
  }
});

// page里使用时
Page({

  /**
   * 页面的初始数据
   */
  data: {
    opacity: 0,
  },
  onPageScroll(evt) {
    throttle(this.handleScroll.bind(this), 300)(evt);
  },

  handleScroll({ scrollTop }) {
    if (scrollTop > SCROLL_TOP_OFFSET && this.data.opacity === 1) {
      // 不需要再计算
      return;
    }
    let opacity = scrollTop / SCROLL_TOP_OFFSET;
    if (scrollTop > SCROLL_TOP_OFFSET) {
      opacity = 1;
    }

    this.setData({ opacity });
  }
})

具体代码见https://github.com/haoyanyu/weapp-components/tree/master/pages/gradient-bar

最后

以上就是粗犷冬日为你收集整理的微信小程序：随页面滚动渐变的顶部导航组件的全部内容，希望文章能够帮你解决微信小程序：随页面滚动渐变的顶部导航组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。