//如圖所示----這里用了自定義組件實(shí)現(xiàn)了小程序吸頂功能
//WXML
<view class="i-sticky-demo">
  <i-sticky scrollTop="{{scrollTop}}">
    <i-sticky-item i-class="i-sticky-demo-title">
      <view slot="title">
       第一層
      </view>
      <view slot="content" wx:for="{{one}}" wx:key="index">
        <view class="i-sticky-demo-item">{{item.name}}</view>
      </view>
    </i-sticky-item>
    <i-sticky-item i-class="i-sticky-demo-title">
      <view slot="title">
       第二層
      </view>
      <view slot="content" wx:for="{{two}}" wx:key="index">
        <view class="i-sticky-demo-item">{{item.name}}</view>
      </view>
    </i-sticky-item>
    <i-sticky-item i-class="i-sticky-demo-title">
      <view slot="title">
        第三層
      </view>
      <view slot="content" wx:for="{{three}}" wx:key="item">
        <view class="i-sticky-demo-item">{{item.name}}</view>
        
      </view>
    </i-sticky-item>
    <i-sticky-item i-class="i-sticky-demo-title">
      <view slot="title">
        最后
      </view>
      <view slot="content" wx:for="{{15}}" wx:key="index">
        <view class="i-sticky-demo-item">{{index+1}}</view>
      </view>
    </i-sticky-item>
  </i-sticky>
</view>

//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')
 },
 //頁面滾動(dòng)執(zhí)行方式
 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;
}