vue.js怎么实现滑动到底部加载更多数据效果？下面本篇文章给大家简单介绍一下vue实现滑动到底部加载更多效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

本文实例为大家分享了vue实现滑动到底部加载更多的具体代码，供大家参考，具体内容如下

思路：

如果可视区的高度域dom元素的getBoundingClientRect().bottom高度相同说明已经到了底部,可以实现加载了

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

})

},

},

}

style:

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

}

}

}

}

}

}

}

}

更多web前端知识，请查阅 HTML中文网 ！！