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", ""); }, 结果
