分页

作者: 风中凌乱的男子 | 来源:发表于2020-08-12 14:02 被阅读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
        })
      }

    },
}

相关文章

  • MyBatis之分页

    五、分页 目录:使用Limit分页、RowBounds分页、分页插件 1.使用Limit分页 语法: 使用MyBa...

  • JS的分页算法

    分页的总页数算法 分页算法 分页存储过程或者页面分页中的分页算法: int pagesize // 每页记录数 i...

  • WEB页面中几种常见的分页样式

    这里谈谈WEB页面中几种常见的分页样式 分页样式一:滚动翻页image 分页样式二:常规分页image 分页样式三...

  • 目录【Java分页(前台+后台)】

    SubList分页-001-分页概述 SubList分页-002-需求 SubList分页-003-中文处理 Su...

  • SSM框架-实现Mybatis分页功能-foreknow_cms

    分页处理 分页1、前台分页2、数据库(后台)分页3、存储过程 Orade (Rownum) Mysql(lim...

  • 2018-10-10:分页

    分页 真分页使用特定的sql语句,条件查询出指定内容 假分页数据全部取出,在页面分页显示 分页数据pageSize...

  • Springboot 分页

    //分页返回类 @ApiModel(value ="分页内容", description ="分页数据返回内容")...

  • 分页SQL

    分页 rownum,rowid 分页SQL

  • Java Web 之分页技术

    本文包括:1、分页技术概述2、实现分页3、完善分业——分页工具条4、几种常见的分页工具条 1、分页技术概述 物理分...

  • 代码CR之分页查询常见问题

    分页查询常见问题: 1.完全没有分页 2.分页size太大 3.超多分页慢SQL 1.完全没有分页 反例: 正例:...

网友评论

      本文标题:分页

      本文链接:https://www.haomeiwen.com/subject/npcpdktx.html