如何使用vue实现滑动到底部加载更多效果

这篇文章主要介绍了如何使用vue实现滑动到底部加载更多效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

思路：

如果可视区的高度域dom元素的getBoundingClientRect().bottom高度相同说明已经到了底部,可以实现加载了

template:

<template>
 <div class="content">
  <div class="logo">
   <div>
    <img v-if="server[0].thUintroduceLogo" :src="setIp + server[0].thUintroduceLogo" alt="">
    <img v-if="!server[0].thUintroduceLogo" src="../../../assets/images/shooping/u538.png" alt="">
   </div>
   <div>
    <span>{{server[0].companyName}}</span>
   </div>
   <div @click="callCustomer()">
    <img src="../../../assets/images/shooping/u37.png" alt=""> 致电客服
   </div>
  </div>
  <div class="info">
   <div class="swipe">
    <mt-swipe ref="swipe" :auto="0" :showIndicators="false" @change="swipeChange">
     <mt-swipe-item v-for="(item,index) in server[0].thUintroduceImg.split(',')" :key="index">
      <div class="jcc">
       <img :src="setIp + item" alt="">
      </div>
     </mt-swipe-item>
    </mt-swipe>
    <span class="index">{{activeIndex}}/{{server[0].thUintroduceImg.split(',').length}}</span>
   </div>
   <div class="info1">
    <p>{{server[0].thUintroduceText}}</p>
    <span @click="hidden()" v-if="show"> <i>......</i> 展开</span>
   </div>
  </div>
  <div class="shopping">
   <h5>
    <img src="../../../assets/images/shooping/u19.png" alt="">
    <span>全部商品</span>
   </h5>
   <img src="../../../assets/images/shooping/split.jpg" alt="">
  </div>
  <div>
   <div ref="my_pull" class="listUl">
    <div v-for="item in server" :key="item.pId" class="itemLIST" @click="pushInfo(item)">
     <div>
      <img :src="setIp + item.pImgeOne" alt="">
     </div>
     <div>
      <h4>{{item.pTitle}}</h4>
      <p>
       <span>已售{{item.pSaleNums}}件</span>
       <span v-if="!isMemberId">价格登录可见</span>
       <span v-if="isMemberId">&yen;{{item.uPrice}}</span>
      </p>
     </div>
    </div>
    <!-- <div v-for="item in 10" :key="item" >{{item}}</div> -->
   </div>
  </div>
  <div v-if="isbottom == -1" class="isbottom">
   <i class="iconfont icon-jiazai1"></i>
   <span>加载中，请稍后</span>
  </div>
  <div v-if="isbottom == 1" class="isbottom">
   <span>没有更多数据了</span>
  </div>
 </div>
</template>

script:

<script>
 import {
  Swipe,
  SwipeItem,
  Popup
 } from 'mint-ui'
 export default {
  data: () => ({
   server: [],
   page: 1,
   clientHeight: 0,
   el: {},
   isbottom: 0,
   show: true,
   activeIndex: 1
  }),
  created() {
   this.getServer()
  },
  beforeDestroy() {
   let title = document.querySelector("#title")
    title.style.background = "#6a7d8f";
    let arr = document.querySelector(".is-left")
    arr.style.color = "#fff"
  },
  computed: {
   isMemberId() {
    return this.$store.state.isMemberId
   }
  },
  mounted() {
   this.clientHeight = document.documentElement.clientHeight
   this.$nextTick(() => {
    let title = document.querySelector("#title")
    title.style.background = "#fff";
    let arr = document.querySelector(".is-left")
    arr.style.color = "#333"
    this.el = this.$refs.my_pull;
    window.addEventListener('scroll', this.handleScroll)
   })
  },
  methods: {
   callCustomer() {
    let msg = this.server[0].thServicePhone;
    $App.callCustomer(msg);
   },
   swipeChange() {
    this.activeIndex = this.$refs.swipe.index + 1
   },
   hidden() {
    let el = document.querySelector(".info1")
    el.style.height = "auto"
    this.show = false
   },
   pushInfo(item) {
    this.$store.dispatch("newshoppingInfo", item)
    console.log(this.$store.state.shoppingInfo);
    this.$router.push({
     path: "/shooping/shoopingInfo",
    })
   },
   handleScroll() {
    let a = this.el.getBoundingClientRect().bottom;
    a = Math.ceil(a);
    if (a == this.clientHeight) {
     this.isbottom = -1
     this.page++
      this.getServer()
    }
   },
   // 获取后台数据
   getServer() {
    $App.showWebActivity();
    this.$http.post(this.root + 'agriculture/xxxxxxxxx', {
     key: this.zkey,
     code: this.zcode,
     page: this.page,
     rows: 4,
     townsid: sessionStorage.getItem("villageId"),
     pUid: sessionStorage.getItem("shoppingUid")
    }, {
     emulateJSON: true
    }).then((res) => {
     $App.dismissWebActivity()
     if (res.body.code == 100) {
      if (this.page == 1) {
       this.server = res.body.list.rows;
      } else {
       this.server = this.server.concat(res.body.list.rows)
      }
      if (res.body.list.rows.length >= 4) {
       this.isLast = false
      } else {
       this.isLast = true;
       this.isbottom = 1
       window.removeEventListener('scroll', this.handleScroll)
      }
     } else {
      $App.toastWebActivity(res.body.message)
      console.log(res)
     }
    }, (err) => {
     $App.dismissWebActivity()
    })
   },
  },
 }
</script>

style:

<style lang="less" scoped>
 .content {
  .isbottom {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 15px 0;
   color: #999;
   i {
    font-size: 30px;
    animation: rotate 1s infinite;
   }
   span {
    color: #ccc;
    padding-left: 15px;
   }
  }
  .logo {
   background: #fff;
   padding-bottom: 15px;
   div {
    &:nth-child(1) {
     display: flex;
     justify-content: center;
     img {
      width: 60px;
      height: 60px;
     }
    }
    &:nth-child(2) {
     text-align: center;
     padding: 15px 15px;
     color: #609bf0;
    }
    &:nth-child(3) {
     display: flex;
     justify-content: center;
     align-items: center;
     color: #1296db;
     border: #1296db 1PX solid;
     width: 50%;
     margin: 0 auto;
     padding: 5px 0;
     font-size: 15px;
     img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
     }
    }
   }
  }
  .info {
   background: #fff;
   margin-bottom: 10px;
   padding-bottom: 15px;
   .swipe {
    height: 300px;
    background: #eee;
    position: relative;
    .jcc {
     display: flex;
     justify-content: center;
     height: 300px;
    }
    img {
     // width: 100%;
     height: 100%;
    }
    .index {
     position: absolute;
     background: rgba(243, 244, 245, .8);
     padding: 5px 15px;
     bottom: 10px;
     right: 10px;
     border-radius: 50px;
    }
   }
  }
  .info1 {
   background: #fff;
   position: relative;
   padding: 15px 9px 0;
   height: 79px;
   overflow: hidden;
   p {
    line-height: 22px;
    text-indent: 2em;
    letter-spacing: 1.2px;
   }
   span {
    width: 75px;
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 9px;
    color: #39c;
    background: #fff;
    i {
     color: #333;
    }
   }
  }
  .shopping {
   background: #fff;
   padding-top: 15px;
   h5 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    >img {
     width: 30px;
     height: 30px;
     margin-right: 10px;
    }
    span {
     color: #0f589e;
     font-weight: normal;
    }
   }
   img {
    display: block;
    width: 100%;
    height: 2px;
   }
  }
  .listUl {
   // display: flex;
   // flex-wrap: wrap;
   padding: 0 15px;
   top: 60px;
   height: calc(100% - 100px) !important;
   background: #fff;
   overflow: hidden;
   .itemLIST {
    // float: left;
    width: 50%;
    display: inline-block;
    padding-top: 15px;
    padding-bottom: 15px;
    &:nth-child(2n) {
     padding-right: 5px;
    }
    &:nth-child(2n -1) {
     padding-left: 5px;
    }
    img {
     // width: 100%;
     height: 100%;
     /* prettier-ignore */
     // border: 1PX solid #eee;
    }
    div {
     &:first-child {
      overflow: hidden;
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
     }
     &:last-child {
      h4 {
       font-weight: normal;
       font-size: 16px;
       margin-top: 5px;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
      }
      p {
       font-size: 14px;
       margin-top: 5px;
       display: flex;
       align-items: center;
       justify-content: space-between; // padding: 0 15px;
       padding-right: 10px;
       span {
        display: block;
        &:first-child {
         color: #888;
        }
        &:last-child {
         color: red;
         font-size: 16px;
        }
       }
      }
     }
    }
   }
  }
 }
</style>

感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用vue实现滑动到底部加载更多效果”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!