小程序自定义模板实现小程序吸顶功能

//如图所示----这里用了自定义组件实现了小程序吸顶功能

//WXML

    
        
            
              第一层
            
            
                {{item.name}}
            
        
        
            
              第二层
            
            
                {{item.name}}
            
        
        
            
                第三层
            
            
                {{item.name}}
                
            
        
        
            
                最后
            
            
                {{index+1}}
            
        
    

//json
{
  "navigationBarTitleText":"吸顶",
  "usingComponents": {
    "i-sticky": "../../compont/sticky/index",
    "i-sticky-item": "../../compont/sticky-item/index"
  }
}

//JS
Page({
  data: {
    scrollTop: 0,
    one: [{
      name: "第一层"
    }, {
      name: "第一层"
    }, {
      name: "第一层"
    }, {
      name: "第一层"
    }, {
      name: "第一层"
    }, {
      name: "第一层"
    }, {
      name: "第一层"
    }],
    two: [{
      name: "第二层"
    }, {
      name: "第二层"
    }, {
      name: "第二层"
    }, {
      name: "第二层"
    }, {
      name: "第二层"
    }, {
      name: "第二层"
    }, {
      name: "第二层"
    }, {
      name: "第二层"
    }],
    three: [{
      name: "第三层"
    }, {
      name: "第三层"
    }, {
      name: "第三层"
    }, {
      name: "第三层"
    }, {
      name: "第三层"
    }, {
      name: "第三层"
    }, {
      name: "第三层"
    }, {
      name: "第三层"
    }],
  },
  onChange(event) {
    console.log(event.detail, 'click right menu callback data')
  },
  //页面滚动执行方式
  onPageScroll(event) {
    this.setData({
      scrollTop: event.scrollTop
    })
  }
});

 

 

//WXSS
.i-sticky-demo-item{
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  padding:0 30rpx;
  border-bottom: 1rpx solid #ddd;
}