本文例項為大家分享了小程式實現吸頂功能的具體程式碼，供大家參考，具體內容如下

//如圖所示----這裡用了自定義元件實現了小程式吸頂功能
//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: "第一層"
  }],two: [{
   name: "第二層"
  },{
   name: "第二層"
  },{
   name: "第二層"
  }],three: [{
   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;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。