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

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

movie-grid-template.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>

more-movie.js

var util = require('../../../utils/util.js')
var app = getapp();
page({
  data:{
    categorytitle: '',
    movies: {},
    requseturl: '',
    isempty: true,
    totalcount: 0
  },
  onload: 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;
  },

  onscrolllower:function(event){
    var nexturl = this.data.requseturl + 
    "?start=" + this.data.totalcount + "&count=20";
    util.http(nexturl,this.processdoubandata)
  },

28.设置loading状态

more-movie.js

onscrolllower: 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.wxml

<import src="movie-list/movie-list-template.wxml" />
<import src="movie-grid/movie-grid-template.wxml" />
<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_baseurl + "/v2/movie/search?q=" + text;
    this.getmovielist(searchurl, "searchresult", "");
  },
    

结果