微信小程序下拉刷新

淩亂°似流年 2021-07-24 21:02 504阅读 0赞

框架->小程序配置->页面配置
    api->界面->下拉刷新
    
    (1)、在对应页面设置,若在app.json的'window'中设置,则会使得所有页面都有下拉刷新功能
    (2)、在父页面.json文件中配置,其子页面也会具有下拉刷新功能
    	"enablePullDownRefresh":true
    	
    (3)、设置下拉刷新函数
    	onPullDownRefresh:function(){...}
    		(1)刷新时发送网络请求
    		(2)将之前数据恢复到初始状态/置空

代码示例:  
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();
      },
    
      //下拉刷新
      onPullDownRefresh:function()
      { 
        //刷新发送初始网络请求
        var reurl = this.data.url + this.data.sear+"?"+ app.globalUrl.apikey;
        //刷新后使得下拉加载为第一次
        this.data.flag=true;
        //刷新后使得存放的数据为空
        this.data.movies=[];
        //刷新使得请求数据从地0条开始增加
        this.data.start=0;
        //发送网络请求
        tools.http(reurl,this.callback);
      }
    
    
    
    })