不用插件vue实现滚动加载

╰+哭是因爲堅強的太久メ 2022-05-25 14:38 249阅读 0赞

关键所在是实现滚动到底部，然后进行post请求，然后将获得的分页的数据push到数组中

1，在data中定义三个变量page,isadd,data\_wrpa其中page是控制分页的，isadd是控制是否post的，data\_wrpa是数据的容器

2，给容器绑定scroll事件

<ul class="left\_li\_ul" @scroll="gd\_add">  
              <li v-for="(item,index) in huifang\_li" @click="left\_li(index)" class="left\_li1">  
                  <div>  
                      <div class="hf\_username">\{ \{item.username\}\}</div>  
                      <div><img :src="item.sex" alt="" style="width: 20px;height: 20px;"></div>  
                      <div>\{ \{item.age\}\}</div>  
                      <div><img :src="item.dengji" alt="" style="width: 20px;height: 20px;"></div>  
                  </div>  
                  <div>  
                      <div>\{ \{item.data\}\}</div>  
                      <div class="hf\_beizhu">\{ \{item.beizhu\}\}</div>  
                  </div>  
              </li>

</ul>

3.在methods中写这个方法

gd\_add()\{  
            let wrap\_height=$('.left\_li\_ul').height();  //容器的高度  
            let scroll\_top=$('.left\_li\_ul').scrollTop();   //滚动条的scrolltop  
            let scroll\_height=$('.left\_li\_ul').prop('scrollHeight');  //内容的高度  
            let is\_height=scroll\_height-wrap\_height-scroll\_top-125   //判断是否为0，既是否到了底部（这里的-125是因为我定了个padding-bottom=125,所以要减掉）  
            if (is\_height==0&&this.isadd) \{  
              this.page++;  
              this.isadd=false;  
              $.post('',\{page:this.page\},function(json)\{   //具体怎么处理数据自行解决吧，情况不一样  
                for(let i=0;i<json.length;i++)\{  
                  this.huifang\_li.push(json\[i\])  
                \}  
              \})  
              console.log(this.page)  
            \}

\},

4，注意初始的时候需要渲染page=0的数据，所以在mounted钩子函数中先请求一下数据并渲染

mounted()\{  
          $.post('',\{page:this.page\},function(json)\{  
            for(let i=0;i<json.length;i++)\{  
              this.huifang\_li.push(json\[i\])  
            \}  
          \})

\},

ok就是这么简单！！