分页

2020-08-12  本文已影响0人  风中凌乱的男子
移动端 vant
##Dom:
<van-list v-model="loading2" :finished="finished2" 
:immediate-check="false" finished-text="没有更多了" 
@load="onLoad2" :offset="10">
       ##xxxx##
       ##xxxx##
       ##xxxx##
</van-list>
##script:
data() {
    return {
      page_size:10,
      page:1,
      total: 0,//总共的数据条数
      loading: false,
      finished: false,
  },
methods:{
onLoad() {
      this.page++
      getweeklist({ page: this.page, page_size: this.page_size }).then(res => {
        let rows = res.data.list
        this.loading = false;
        this.total = res.data.count;
        if (rows == null || rows.length === 0) {
          // 加载结束
          this.finished = true;
          return;
        }
        // 将新数据与老数据进行合并
        this.list = this.list.concat(rows);
        //如果列表数据条数>=总条数,不再触发滚动加载
        if (this.list.length >= this.total) {
          this.finished = true;
        }
      });
    },
}
pc端 element-ui
## Dom:
 <div class="fenye" style="margin-top:15px;">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5,10, 20, 30, 40]" :page-size="pageSize" layout="total, prev, pager, next,sizes" :total="total">
    </el-pagination>
</div>
methods:{
// 翻页
    handleSizeChange(v) {
      this.loading = true
      this.pageSize = v
      if (this.keywords) {
        getGameList({ pageSize: this.pageSize, pageNum: this.pageNum, keywords: this.keywords }).then(res => {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        })
      } else {
        getGameList({ pageSize: this.pageSize, pageNum: this.pageNum }).then(res => {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        })
      }
    },
    // 翻页
    handleCurrentChange(v) {
      this.loading = true
      this.pageNum = v
      if (this.keywords) {
        getGameList({ pageSize: this.pageSize, pageNum: this.pageNum, keywords: this.keywords }).then(res => {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        })
      } else {
        getGameList({ pageSize: this.pageSize, pageNum: this.pageNum }).then(res => {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        })
      }

    },
}
上一篇 下一篇

猜你喜欢

热点阅读