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

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;   100%;  display: flex;  flex-direction: row;}.search-img {  margin: auto 0 auto 20rpx;}.search input {  height: 100%;   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;     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", "");  },    

结果