uniapp 分页加载吸顶（模仿微信账单）

分页吸顶

(一个php程序员刚学会uniapp 开发的，目前不能用scroll-view,没法获取到页面滚动的距离)

废话不说，直接上代码

<template>
   <view class="pageBox">
       <view class="border-bottom white" v-for="(item,index) in list" >

           <view v-if="item.ismf" class="flex-between pd20 bg box" :class="[(isFixedTop[item.mfk]) ?'fixedTop' : '']" :style="{'z-index':index+10000}">
               <view class="fontSize30 ">{{item.Y}}年{{item.M}}月</view>
               <view class="fontSize26 fontColor mgtop10">支出￥{{item.income}}   收入￥{{item.expenditure}}</view>
           </view>

           
           <view v-if="!index" class="tops"></view>

           <view class="flex-between pd20" >
               <view class="fontSize28 fontColor">
                   <view class="lineHeight">申请提现</view>
                   <view class="lineHeight">订单编号：29928822982227</view>
               </view>
               <view class="fontSize28 fontColor">
                   <view class="blackColor text-right lineHeight fw">{{item.amount}}</view>
               </view>
           </view>
           <view class="lineHeight50 fontSize28 fontColor flex-align-center pd20">
               <u-icon name="clock" color="#2979ff" size="20"></u-icon>
               <view class="mgleft10">{{item.create_time_text}}</view>
           </view>
       </view>

   </view>
</template>

<script>
   export default {
       data() {
           return {
               isFixedTop:[],
               // isFixedTop0:false,
               // isFixedTop1:false,
               Topdistance:[],
               topHeight:"",
               mainTitle:'',

               list : [],

               point:[],
               page:1,
               isLastPage:0,//是否为最后一页
           }
       },
       onLoad(option){
           var that = this;
           that.pay_way = option.pay_way;
           if(option.isCheck){
               that.isCheck = 1;
           }
       },

       mounted(){
           var that = this;
           that.getWaterList();
       },
       onPageScroll(e) {
           var that = this


           for(let i = 0; i < that.Topdistance.length; i++){
               if(e.scrollTop >= that.Topdistance[i]){

                   that.isFixedTop[i] = true
                   that.$set(that.isFixedTop,i,true)
                   that.isFixedTop[i] = true
               }else{

                   that.isFixedTop[i] = false
                   that.$set(that.isFixedTop,i,false)
                   that.isFixedTop[i] = false
               }
           }
           return false;
       },
       onReachBottom() {
           let that = this;
           that.getWaterList();
       },
       methods: {

           init:function(t,f){

               var that = this;

               if(f){
                   uni.pageScrollTo({
                       scrollTop:0,
                       duration:0
                   });
               }

               setTimeout(()=>{
                   that.GetTop()
               },t)
           },
           GetTop(){
               var _this=this
               uni.getSystemInfo({
                   success:(resu)=>{
                       const query = uni.createSelectorQuery().in(this)
                       query.selectAll('.box').boundingClientRect()
                       query.selectViewport().scrollOffset()
                       query.exec(function(res){

                           _this.arr(res)
                       })
                   },
                   fail:(res)=>{}
               })
           },
           arr(res){
               var that = this;
               var TopdistanceLen = that.Topdistance.length;

               for(let i = 0; i < res[0].length; i++){
                   if(i>= TopdistanceLen){//加上此条件能避免对前面已经获取定位的数据重复赋值，造成错误
                       that.Topdistance[i] = res[0][i].top + res[1]['scrollTop'];

                   }
                   // this.isFixedTop[i] = false
               }
           },

           getWaterList(){
               var that = this;
               if(that.isLastPage){
                   return false;
               }
               var option = {
                   page:that.page,
                   pay_way:that.pay_way,
                   need_statistics:1
               };
               that.$post('water/getWaterList',option).then(res=>{

                   if(res.data.data.current_page == res.data.data.last_page){
                       that.isLastPage = 1;
                   }else {
                       that.page ++;
                   }

                   for(var i=0;i<res.data.data.data.length;i++){
                       let pointLen = that.point.length;
                       if(pointLen){
                           if(that.point[pointLen-1] != res.data.data.data[i]['Y']+'-'+res.data.data.data[i]['M']){
                               that.isFixedTop[pointLen] = false;
                               res.data.data.data[i]['mfk'] = pointLen;
                               res.data.data.data[i]['ismf'] = 1;//判断是否为月初
                               that.point.push(res.data.data.data[i]['Y']+'-'+res.data.data.data[i]['M']);
                           }else{
                               res.data.data.data[i]['ismf'] = 0;
                           }
                       }else{
                           that.isFixedTop[0] = true;
                           res.data.data.data[i]['mfk'] = 0;
                           res.data.data.data[i]['ismf'] = 1;//判断是否为月初
                           that.point[0] = res.data.data.data[i]['Y']+'-'+res.data.data.data[i]['M'];
                       }
                   }

                   that.list = that.list.concat(res.data.data.data);
                   //数据渲染完成，立即重新去对新的需要吸顶的元素进行定位
                   that.init(0,0);

               });

           },

       },

   }
</script>

<style>

.fixedTop{
   position: fixed;
   top:0;
   left: 0;
   right: 0;

}
.tops{
   height: 7vh;
}

</style>

希望能帮到大家

版权声明：本文为jack_tyc原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/jack_tyc/article/details/128822505