小程序--上滑加载更多数据/下拉刷新

一、上滑加载更多数据

wxml;

<import src="../movie/movie-template.wxml" />
<template name="movieGridTemplate">
  <scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
    <block wx:for="{{movies}}" wx:for-item="movie">
      <view class="single-view-container">
        <template is="movieTemplate" data="{{...movie}}" />
      </view>
    </block>
  </scroll-view>
</template>

js     

// wx.showNavigationBarLoading()组件

var app = getApp()
var util = require('../../../utils/util.js')
Page({
  data: { 
    navigateTitle: "",  //设置中间变量 把onload中的获取到的标题函数传入到onReady中使用
    requestUrl: "",
    totalCount: 0,
    isEmpty: true  //是否是第一次加载
  },
  onLoad: function (options) {
     var category = options.category;//获取url传递的参数
     var dataUrl = "";//记录此时加载的url的值  用于滑动加载
     this.data.navigateTitle = category;
     //加载数据
     var dataUrl = "";
     switch (category) {
       case "正在热映":
         dataUrl = app.globalData.doubanBase +
           "/v2/movie/in_theaters";
         break;
       case "即将上映":
         dataUrl = app.globalData.doubanBase +
           "/v2/movie/coming_soon";
         break;
       case "豆瓣Top250":
         dataUrl = app.globalData.doubanBase + "/v2/movie/top250"; //默认是star =0 &count=20
         break;
     }
     wx.setNavigationBarTitle({
      title: this.data.navigateTitle
    })
    this.data.requestUrl = dataUrl;
    util.http(dataUrl, this.processDoubanData);
  },
  //数据处理 
  processDoubanData: function (moviesDouban) {
    var movies = [];
    for (var idx in moviesDouban.subjects) {
      var subject = moviesDouban.subjects[idx];
      var title = subject.title;
      if (title.length >= 6) {
        title = title.substring(0, 6) + "...";
      }
      // [1,1,1,1,1] [1,1,1,0,0]
      var temp = {
        stars: util.convertToStarsArray(subject.rating.stars),
        title: title,
        average: subject.rating.average,
        coverageUrl: subject.images.large,
        movieId: subject.id
      }
      movies.push(temp)
    }
    //每次数据绑定之前 totalCount做一次累加
    //加载更多 jq是加载append的思想 但是小程序没有dom  整体思路：第一次是20条数据 第二次是40条 数据绑定每次都setdata
    //每次加载都需要数据更新一下
    var totalMovies = {}
    //如果要绑定新加载的数据，那么需要同旧有的数据合并在一起
    if (!this.data.isEmpty) {
      totalMovies = this.data.movies.concat(movies);
    }
    else {
      totalMovies = movies;
      this.data.isEmpty = false;
    }
    this.setData({
      movies:totalMovies
    })

    this.data.totalCount += 20;
  },
  callBack:function(data){
    console.log(data);
  },
  //上滑加载更多函数   使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。
  onScrollLower: function (event) {     
     //上滑动加载 变化的是加载数据的序号初始1-20  再次上滑加载20-40 star= &count=    由于后台接口没有那么多数据看不到效果
     //设定要加载的url
     var nextUrl = this.data.requestUrl + "?start=" + this.data.totalCount +"&count=20"
     //获取数据
     util.http(nextUrl, this.processDoubanData);

  },
  onReady: function (event) {
    wx.setNavigationBarTitle({
      title: this.data.navigateTitle
    })
  }
})

二、下拉刷新

1、使用单页的json文件配置

{

"enablePullDownRefresh": true

}

2、APP.json window配置

"window": {

"enablePullDownRefresh": true

},

3、js

enablePullDownRefresh会触发函数

onPullDownRefresh

//上拉刷新
  onPullDownRefresh:function(event){
    console.log('下拉刷新');
    var refreshUrl = this.data.requestUrl +
      "?star=0&count=20";
    this.data.movies = {};   
    this.data.isEmpty = true;
    this.data.totalCount = 0;
    util.http(refreshUrl, this.processDoubanData);
    wx.showNavigationBarLoading();
  },