如果可视区的高度域dom元素的getBoundingClientRect().bottom高度相同说明已经到了底部,可以实现加载了
template:
<template> <div> <div> <div> <img v-if="server[0].thUintroduceLogo" :src="setIp + server[0].thUintroduceLogo" alt=""> <img v-if="!server[0].thUintroduceLogo" src="" alt=""> </div> <div> <span>{{server[0].companyName}}</span> </div> <div @click="callCustomer()"> <img src="" alt=""> 致电客服 </div> </div> <div> <div> <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> <img :src="setIp + item" alt=""> </div> </mt-swipe-item> </mt-swipe> <span>{{activeIndex}}/{{server[0].thUintroduceImg.split(',').length}}</span> </div> <div> <p>{{server[0].thUintroduceText}}</p> <span @click="hidden()" v-if="show"> <i>......</i> 展开</span> </div> </div> <div> <h4> <img src="" alt=""> <span>全部商品</span> </h4> <img src="" alt=""> </div> <div> <div ref="my_pull"> <div v-for="item in server" :key="item.pId" @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">{{item}}</div> --> </div> </div> <div v-if="isbottom == -1"> <i></i> <span>加载中，请稍后</span> </div> <div v-if="isbottom == 1"> <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>