애플 릿 사용자 정의 템 플 릿 흡수 기능 구현

본 논문 의 사례 는 여러분 에 게 작은 프로그램 이 흡수 기능 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

//    ----                   
//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')
 },
 //        
 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;
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.