1.监听滚动条(scroll)
<div class="opper" ref="boxxer"></div>
mounted() {
this.$refs.boxxer.addEventListener('scroll', this.lazyLoading) // 滚动到底部,再加载的处理事件1
},
methods: {
// 滚动加载
lazyLoading(e) {
const scrollTop = e.target.scrollTop // 滚动条滚动时,距离顶部的距离
const windowHeight = e.target.clientHeight // 可视区的高度
const scrollHeight = e.target.scrollHeight // 滚动条的总高度
// 滚动条到底部
if (scrollTop + windowHeight === scrollHeight) {
this.pageInfo.Page++
GetPageList({ pageInfo: this.pageInfo, model: this.model }).then((res) => {
if (res.IsSucceed) {
res.Data.Data.map((item, index) => {
var timearr = res.Data.Data[index].FindDateTime.replace(" ", ":").replace(/\:/g, "-").split("-");
var timestr = timearr[0] + "/" + timearr[1] + "/" + timearr[2].substring(0, 2);
item.FindDateTime = timestr
})
this.recordcleaning = this.recordcleaning.concat(res.Data.Data)
}
})
}
},
}
注意:如果是个查询事件,每次查询都要把距离顶部的距离设置为0
this.$refs.boxxer.scrollTop= 0;
.监听浏览器窗口(resize)
mounted() {
this.getdata()
window.addEventListener('resize', () => {
// 让我们的图表调用 resize这个方法
// myChart.resize()
this.initchart()
})
},
initchart() {
this.id++
this.$nextTick(() => {
var chartDom = document.getElementById('behavior')
this.myChart = echarts.init(chartDom)
this.option && this.myChart.setOption(this.option)
})
},