思路:
如果可視區的高度域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>