zoukankan      html  css  js  c++  java
  • (十四)微信小程序:上拉加载 下拉刷新

    一:上拉加载

      1.movie-more.js中添加API给出的onReachBottom()函数,执行加载操作

    // pages/movie/movie-more/movie-more.js
    var utils = require("../../../utils/utils.js");
    Page({
    
      data: {
        movies:[],
        publicURL:"",
        start:0
      },
    
      onLoad: function (options) {
          console.log(options.category);
          var publicURL = "";
          switch(options.category){
            case "正在热映":
              publicURL = "http://localhost:8888/v2/movie/in_theaters";
              break;
            case "即将上映":
              publicURL = "http://localhost:8888/v2/movie/coming_soon";
              break;  
            case "排行榜":
              publicURL = "http://localhost:8888/v2/movie/top250";
              break;  
          }
          utils.http(publicURL,this.getMovieInfo,null,null);
          this.setData({
            publicURL:publicURL
          });
      },
      getMovieInfo:function(data){
        var movies = [];
        for(var i = 0;i<data.subjects.length;i++){
            var temp = {
              large:data.subjects[i].images.large,
              title:utils.cutTitle(data.subjects[i].title),
              star:utils.star(data.subjects[i].rating.stars),
              average:data.subjects[i].rating.average,
              id:data.subjects[i].id
            }
            movies.push(temp);
        }
        this.setData({
          //合并两次数据值
          movies:this.data.movies.concat(movies),
          start:this.data.start+=20
        });
        
      },
      //页面上拉加载
      onReachBottom:function(){
          utils.http(this.data.publicURL+"?count=20&start="+this.data.start,this.getMovieInfo,null,null);
      }
    
    })
    movie-more.js

         代码解析:1.设置每刷新一次数据,数据从start+=20开始

              2.将之前查到的数据和加载后的数据进行合并(concat())

    二:下拉刷新

      1.开启下拉刷新限制

     

      2.movie-more.js中添加API给出的onPullDownRefresh()函数,执行刷新操作 

     onPullDownRefresh:function(){
        //清除之前数据
        this.setData({
          movies:[]
        });
        utils.http(this.data.publicURL,this.getMovieInfo,null,null);
     }
    onPullDownRefresh

      本节完成对上拉加载和下拉刷新的功能,利用API提供+提供相应的条件操作即可实现,下节对电影页面进行优化~

  • 相关阅读:
    文件查找和比较命令 来自: http://man.linuxde.net/find
    Docker学习计划
    Mybatis各种模糊查询
    linux下vi命令大全
    mac下的环境变量
    slf4j输出变量
    使用lombok中的log
    idea中的java web项目(添加jar包介绍)和java maven web项目目录结构
    slf4j+logback&logback.xml
    日志框架
  • 原文地址:https://www.cnblogs.com/happy-prince/p/12782430.html
Copyright © 2011-2022 走看看