微信小程序实战–集阅读与电影于一体的小程序项目（七）

27.实现上滑加载更多数据

movie-grid-template.w

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

more-movie.js

var util = require(\'../../../utils/util.js\')
var app = getApp();
Page({
  data:{
    category : \'\',
    movies: {},
    requsetUrl: \'\',
    isEmpty: true,
    totalCount: 0
  },
   : function (options) {
    .
    .
    .
    this.data.requsetUrl = dataUrl;
    util.http(dataUrl, this.processDoubanData)
  },

  processDoubanData:function(data){
   .
   .
   .
   
    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;
  },

   Lower:function(event){
    var nextUrl = this.data.requsetUrl + 
    \"?start=\" + this.data.totalCount + \"&count=20\";
    util.http(nextUrl,this.processDoubanData)
  },

28.设置loading状态

more-movie.js

 Lower: function (event) {
    var nextUrl = this.data.requsetUrl +
      \"?start=\" + this.data.totalCount + \"&count=20\";
    util.http(nextUrl, this.processDoubanData);
    wx.showNavigationBarLoading()
  },
  
  processDoubanData:function(data){
    .
    .
    
    this.setData({
      movies: totalMovies
    })
    this.data.totalCount += 20;
    wx.hideNavigationBarLoading()
  },

29.实现下拉刷新

more-movie.json

{
  \"enablePullDownRefresh\": true
}

more-movie.js

onPullDownRefresh: function () {
    var refreshUrl = this.data.requsetUrl +
      \"?star=0&count=20\";
    this.data.movies = {};
    this.data.isEmpty = true;
    this.data.totalCount = 0;
    util.http(refreshUrl, this.processDoubanData);
    wx.showNavigationBarLoading();
  },

  processDoubanData:function(data){
    .
    .
    .
    this.data.totalCount += 20;
    wx.hideNavigationBarLoading()
    wx.stopPullDownRefresh()
  },

30.电影搜索功能实现

movies.w

<import src=\"movie-list/movie-list-template.w \" />
<import src=\"movie-grid/movie-grid-template.w \" />
<view class=\"search\">
  <icon type=\"search\" class=\"search-img\" size=\"13\" color=\"#405f80\"></icon>
  <input type=\"text\" placeholder=\"西虹市首富\" placeholder-class=\"placeholder\" bindfocus=\"onBindFocus\" bindconfirm=\"onBindBlur\"/>
   <image wx:if=\"{{searchPanelShow}}\" src=\"/images/icon/xx.png\" class=\"xx-img\" bindtap=\"onCancelImgTap\"></image> 
</view>
.
.

<view class=\"search-panel\" wx:if=\"{{searchPanelShow}}\">
    <template is=\"movieGridTemplate\" data=\"{{...searchResult}}\"/>
</view>

movies.wxss

@import \"movie-grid/movie-grid-template.wxss\";

.search {
  background-color: #f2f2f2;
  height: 80rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.search-img {
  margin: auto 0 auto 20rpx;
}

.search input {
  height: 100%;
  width: 600rpx;
  margin-left: 20px;
  font-size: 28rpx;
}

.placeholder {
  font-size: 14px;
  color: #d1d1d1;
  margin-left: 20rpx;
}

.search-panel{
    position:absolute;
    top:80rpx;
}

.xx-img{
    height: 30rpx;
    width: 30rpx;
    margin:auto 0 auto 10rpx;
}

movies.js

Page({
  data: {
    inTheaters: {},
    comingSoon: {},
    top250: {},
    searchResult: {},
    containerShow: true,
    searchPanelShow: false
  },

    onBindFocus: function (event) {
    this.setData({
      containerShow: false,
      searchPanelShow: true
    })
  },
  onCancelImgTap: function (event) {
    this.setData({
      containerShow: true,
      searchPanelShow: false,
      searchResult: {}
    })
  },
  
  onBindBlur: function (event) {
    var text = event.detail.value
    var searchUrl = app.globalData.g_ Url + \"/v2/movie/search?q=\" + text;
    this.getMovieList(searchUrl, \"searchResult\", \"\");
  },
    

结果