微信小程序上拉加载

落日映苍穹つ 2021-07-24 21:36 686阅读 0赞

框架->框架接口->页面->page
    
    上拉加载函数(局部刷新):
    	 onReachBottom:function(event){xxx}
    	(1)在上拉加载函数中设置网络请求,实现更新数据的效果
    	(2)每次上拉加载,配合加载动画食用更加
    	(3)使用concat能实现数组的累加
    
    如何在原有数据上加载:
    	在原始网络请求的函数中,添加变量来保存上一次的数据,通过第一次
    	和非第一次的逻辑判断,来分别赋值变量,最后将变量放置实际的数据里.

代码示例:  
js文件:

// pages/movie/movie-more/movie-more.js
    var app=getApp();
    var tools=require("../../tools/tools.js")
    
    Page({ 
    
      data: { 
        movies:[],
        totalMovies:[],
        isEmpty:true
      },
    
      onLoad: function (options) { 
        var mname=options.mname;
        this.setData({ 
          mname:mname,
          start:0
        })
        var url=app.globalUrl.douban;
        var apikey=app.globalUrl.apikey;
        var sear='';
        switch(mname)
        { 
          case '即将上映':
            sear ='/v2/movie/coming_soon';
            break;
          case "正在热映":
            sear ='/v2/movie/in_theaters';
            break;
          case "Top250":
            sear ='/v2/movie/top250';
            break;
    
        }
        this.setData({ 
          url:url,
          sear:sear
        })
        var dataUrl=url+sear+'?'+apikey;
        tools.http(dataUrl,this.callback);
    
        //导航栏动画
        wx.showNavigationBarLoading()
    
      },
      callback:function(res)
      { 
        var movies = [];
        for (var idx in res.subjects) { 
          var subject = res.subjects[idx];
          var title = subject.title;
          //名字过长处理
          if (title.length >= 6) { 
            title = title.substring(0, 6) + "...";
          }
          var temp = { 
            title: title,
            coverUrl: subject.images.large,
            star: tools.cut(subject.rating.stars),
            average: subject.rating.average,
            movieid: subject.id,
            flag:false
    
          }
          movies.push(temp);
    
        }
        //上拉加载请求数据
        //如果是第一次
        var totalMovies=[];
        if(this.data.isEmpty)
        { 
          this.data.isEmpty=false;
          totalMovies=movies
        }else{ 
          totalMovies=this.data.movies.concat(movies);
        }
    
        this.setData({ 
          movies: totalMovies
        })
    
    
    
        //在数据设置完成后停止加载动画
        wx.hideNavigationBarLoading();
    
      },
      //在页面渲染生命函数中设置导航栏信息
      onReady:function()
      { 
        wx.setNavigationBarTitle({ 
          title: this.data.mname
        })
      },
    
      //页面上拉加载(向上滑动到底部)
      onReachBottom:function(event)
      { 
        this.data.start+=20;
       //到底后的url的请求参数需要变化,加载后续的数据
        var eurl = this.data.url + this.data.sear + "?start=" + this.data.start +"&count=20&" + app.globalUrl.apikey;
        //继续调用网络请求,请求只会的数据
        tools.http(eurl,this.callback);
        //刷新导航栏添加加载动画
        wx.showNavigationBarLoading();
      }
    
    
    })