zoukankan      html  css  js  c++  java
  • 前端常见的《下拉刷新,上拉加载》功能

    我是做前端开发的周先生,有一段时间,一直在做这个功能,然后自己学习上有点心得,趁此我想把这个功能给分享出来,如果有需要,转载时,请附上该文章链接,谢谢@_@!!!!

    以下以小程序为例子

    一、自定义属性 data

    newsList:[ ], //内容

    newsTotal:0,//总数量

    pageIndex:1, //页码

    pageSize:10, //一页显示多少条数据

    isMore:true //是否显示更多数据

    二、方法 methods

    async getNewsList(init){
      if(init){
        this.pageIndex = 1
        this.more = true
      }

      wx.showNavigationBarLoading()
     
      const res = await util.post('/api/content/getunreviewedcontent',{
        page_index:this.pageIndex,
        page_size:this.pageSize
      })

      if (res.list.length < this.pageSize && this.pageIndex > 1) {
        this.isMore = false
      }
     

      if(init){
        this.newsList = res.list
        wx.stopPullDownRefresh()
      }else{
        // 下拉刷新,不能直接覆盖,而是累加
        this.newsList = this.newsList.concat(res.list)
      }

      wx.hideNavigationBarLoading()
    },
    三、功能 
    //上拉加载
    onReachBottom () {
      if (!this.isMore ) {
        // 没有更多了
        return false
      }
      if(Math.ceil(this.newsTotal/this.pageSize)>this.pageIndex){
        this.pageIndex++
        this.getNewsList()
      }
    },
    //下拉刷新
    onPullDownRefresh(){
      this.getNewsList(true)
    },
    //页面初始化
    mounted(){
      this.getNewsList(true)
    }
  • 相关阅读:
    MSMQ 跨服务器读写队列的“消息队列系统的访问被拒绝”的解决方案
    WCF中的ServiceHost初始化两种方式
    正则表达式规则
    常用正则表达式
    Visual Studio 2017使用Asp.Net Core构建Angular4应用程序
    斑马打印机ZT410中文打印
    CNPM 安装 for angularjs
    MAC OS X&Vmware
    HBase
    SQL 和 NoSQL 比较
  • 原文地址:https://www.cnblogs.com/zhoudawei/p/9234386.html
Copyright © 2011-2022 走看看