zoukankan      html  css  js  c++  java
  • js瀑布流触底动态加载数据

    <template>
    <div class="box" ref="box" @mousewheel="onScrollEvent">
    <div class="boxItemStyle" v-for="(userTag, i) in dataSource" :key="i" ref="boxItemStyle"> <a-tag class="moreStyle" @click="more(userTag.primaryParam)"> 更多></a-tag> <div v-for="item in userTag.userTag" :key="item.code"> <p> <span style="text-align: left"> {{ item.name }}:</span> <span style="text-align: right">{{ item.value }}</span> </p> </div> </div> </div> </template> export default { data(){ return { isReachBottom: false, reachBottomDistance: 100 } }, methods: { onScrollEvent () { let scrollTop = this.$refs.box.scrollTop let scrollHeight = this.$refs.box.scrollHeight let offsetHeight = Math.ceil(this.$refs.box.getBoundingClientRect().height) let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance if (currentHeight < scrollHeight && this.isReachBottom) { this.isReachBottom = false } if (this.isReachBottom) { return } if (currentHeight >= scrollHeight) { this.isReachBottom = true this.loading = true if (this.ipagination.current == 1) { this.ipagination.current += 1 } let param = {} param['pageNo'] = this.ipagination.current param['pageSize'] = this.ipagination.pageSize param['portraitId'] = this.portraitId postAction(this.url.list, { ...param }).then((res) => { this.loading = false if (res.success) { this.isScroll = res.result.records this.dataSource = this.dataSource.concat(res.result.records || res.result) this.waterFall(); } }) this.ipagination.current++ } } } }
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    .Net下RabbitMQ的使用(1) 初识RabbitMQ
    Android GridView用法,用到了BaseAdapter
    android 代码布局简单的例子
    ActivityGroup的简单用法(1)详细讲解
    devc++中编译含WINSOCK的代码出现错误的解决方法
    Qt源码分析之QPointer
    QML基础——初识Qt Quick Designer
    Qt源码分析之信号和槽机制
    QML基础——UI布局管理
    Qt源码分析之QObject
  • 原文地址:https://www.cnblogs.com/cupid10/p/15291751.html
Copyright © 2011-2022 走看看