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

曾经终败给现在 2022-11-27 15:35 138阅读 0赞

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

思路：  
一个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][https_github.com_haoyanyu_weapp-components_tree_master_pages_gradient-bar]

[https_github.com_haoyanyu_weapp-components_tree_master_pages_gradient-bar]: https://github.com/haoyanyu/weapp-components/tree/master/pages/gradient-bar