• 前端常见的《下拉刷新,上拉加载》功能


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

    以下以小程序为例子

    一、自定义属性 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)
    }
  • 相关阅读:
    学习笔记之05-printf和scanf函数
    学习笔记之04-函数
    学习笔记之03-第一个C程序代码分析
    学习笔记之02-第一个C程序
    学习笔记之01-C语言概述
    Internal Server Error with LAMP
    Git学习总结
    Git-多人协作
    素数之和
    数列之和
  • 原文地址:https://www.cnblogs.com/zhoudawei/p/9234386.html
Copyright © 2020-2023  润新知