下滑加载更多js_vue.js怎么实现滑动到底部加载更多数据效果？

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

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

思路：

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

template:

{ {server[0].companyName}}

致电客服

{ {activeIndex}}/{ {server[0].thUintroduceImg.split(',').length}}

{ {server[0].thUintroduceText}}

...... 展开

全部商品

{ {item.pTitle}}

已售{ {item.pSaleNums}}件

价格登录可见

¥{ {item.uPrice}}

加载中，请稍后

没有更多数据了

script:

import {

Swipe,

SwipeItem,

Popup

} from 'mint-ui'

export default {

data: () => ({

server: [],

page: 1,

clientHeight: 0,

el: {},

isbott