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">   <h4>    <img src="../../../assets/images/shooping/u19.png" alt="">    <span>全部商品</span>   </h4>   <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>      <h3>{{item.pTitle}}</h3>      <p>       <span>已售{{item.pSaleNums}}件</span>       <span v-if="!isMemberId">价格登录可见</span>       <span v-if="isMemberId">¥{{item.uPrice}}</span>      </p>     </div>    </div>    <!-- <div v-for="item in 10" :key="item" style="height:100px">{{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>