uni-app：列表页实时分页组件实现逻辑

业务场景：uniapp中的列表展示界面，数据列表上划加载，配合显示当前所处分页

image.png

代码层面：
1.布局

page:{weight:100%;height:100%}
optArea:{wight:100%;height:88rpx}
scrollview:{weight:100%,height:calc(100%-88rpx)}

2.template:

<scroll-view
      scroll-y
      class="csrollView"
      :lower-threshold="50"
      @scrolltolower="scrolltolower"
      @scroll=""scroll
><scroll-view/>

//分页组件
<view>
     <view>{{currentPage}}<view/>
     <view class="splitLine"><view/>
     <view>{{totalPage}}<view/>
<view/>

data(){
    return {
        currentPage:1,
        totalPage:1
    }
}
method:{
    getList(){
      // 生成totalPage
    },
    scroll(e) {
      // scrollTop  卷上去的高度
      const {scrollTop} = e.detail
      // 声明一下单页面高度 
      const pageHeight = xxx;
      // 根据卷上去的高度计算当前页(卷上去的高度/单页高度向上取整)
      const currentPage = Math.ceil(scrollTop / pageHeight) > 0 ?  Math.ceil(scrollTop / pageHeight) : 1
    }
    //触底加载新数据
    scrolltolower() {
        this.getList(page+1)
    }
}

image.png