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>

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;
   h4 {
    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 {
      h3 {
       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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。