vue实现滑动到底部加载更多效果

<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> 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 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>