站长资源网络编程
vue实现滑动到底部加载更多效果
简介本文实例为大家分享了vue实现滑动到底部加载更多的具体代码，供大家参考，具体内容如下思路：如果可视区的高度域dom元素的getBoundingClientRect().bottom高度相同说明已经到了底部,可以实现加载了template:
本文实例为大家分享了vue实现滑动到底部加载更多的具体代码，供大家参考，具体内容如下
思路：
如果可视区的高度域dom元素的getBoundingClientRect().bottom高度相同说明已经到了底部,可以实现加载了
template:
<template> <div class="content"> <div class="logo"> <div> <img v-if="server[0].thUintroduceLogo" :src="/UploadFiles/2021-04-02/setIp + server[0].thUintroduceLogo">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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：微信小程序框架的页面布局代码
下一篇：vue实现页面滚动到底部刷新