<template> <div > <ul class="log_list" ref="viewBox" style="height: 100%;overflow:scroll"> <li class="item_cont" v-for="item in pullList" :key="item.index"> <span class="time">{{item.loginTime}}</span><span class="ip">{{item.loginIp}}</span><span class="place">{{item.loginLocation}}</span> </li> </ul> <div class="loading" ref="loading">加载中</div> </div> </template> <script> import AccountService from '../../../common/service/AccountService' export default { name: 'pull', data () { return { pullList: [], currentPage: 1, slideFlag: true } }, mounted () { this.findLogList() this.box = this.$refs.viewBox const scrollTop = document.documentElement.scrollTop const height = document.body.clientHeight // 监听这个dom的scroll事件 this.box.addEventListener('scroll', () => { if (this.slideFlag && scrollTop + height >= this.$refs.loading.offsetTop && this.currentPage < this.totalNum) { this.slideFlag = false this.findLogList() } }, false) }, methods: { findLogList () { let pageNo = this.currentPage let pageSize = this.pageSize AccountService.findLoginLog(pageNo, pageSize).then((data) => { console.log('页面内输出data====', data) this.totalNum = Number(data.data.countNum) || 0 if (this.totalNum === 0) { this.showTotal = false return false } this.pullList = data.data.items || [] this.slideFlag = true this.currentPage++ }).catch((err) => { this.$message({ message: err.message || '接口异常', type: 'error', center: true, customClass: 'common_tip' }) }) } }, computed: { }, components: { } } </script> <style lang="stylus"> .common_tip background rgba(15,15,15,0.80)!important border-radius 4px!important min-width 0!important // width 136px height 32px!important .el-message__content font-size 12px!important color #FFFFFF!important .el-message__icon display none!important </style> <style lang="stylus"> .el-pager li &.active color #ca0c16!important &:hover color #ca0c16!important .el-pagination button &:hover color #ca0c16!important </style> <style scoped lang="less"> </style>
使用https://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll
infinite-scroll下拉数据请求