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

本文实例为大家分享了小程序实现吸顶功能的具体代码，供大家参考，具体内容如下

//如图所示----这里用了自定义组件实现了小程序吸顶功能
//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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。