微信小程序带吸顶效果的导航栏

有时候做微信小程序商城的时候要做可以左右滑动又有吸顶效果的导航栏,最近刚做过一个,不多说直接上代码。
.wxml


    
      
        
          {{navItem.name}}
        
      
    
  

    
      
        
          {{navItem.name}}
        
      
    
  

.js

data{
 fixTop: 760, //区域离顶部的高度
 scrollTop: 0, //滑动条离顶部的距离
}
// 获取滚动条当前位置
  onPageScroll: function (e) {
    let self = this;
    let top = e.scrollTop;
    if (e.scrollTop > 100) {
      this.setData({
        floorstatus: true
      });
    } else {
      this.setData({
        floorstatus: false
      });
   

第一次写,有错误的地方请指正。

你可能感兴趣的:(网页,前端)