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

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

//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;
}