增加分页功能

hingsir · Sep 26, 2016 · 959315e · 959315e
1 parent 654d76f
commit 959315e
Show file tree

Hide file tree

Showing 18 changed files with 225 additions and 282 deletions.
diff --git a/app.js b/app.js
@@ -1,32 +1,10 @@
-//app.js
-var util = require('./utils/util.js')
 App({
   onLaunch: function () {
-    //调用API从本地缓存中获取数据
-    var logs = wx.getStorageSync('logs') || []
-    logs.unshift(Date.now())
-    wx.setStorageSync('logs', logs)
-
   },
-  getUserInfo:function(cb){
-    var that = this;
-    if(this.globalData.userInfo){
-      typeof cb == "function" && cb(this.globalData.userInfo)
-    }else{
-      //调用登录接口
-      wx.login({
-        success: function () {
-          wx.getUserInfo({
-            success: function (res) {
-              that.globalData.userInfo = res.userInfo;
-              typeof cb == "function" && cb(that.globalData.userInfo)
-            }
-          })
-        }
-      });
-    }
+  onShow: function () {
   },
-  globalData:{
-    userInfo:null
+  onHide: function () {
+  },
+  globalData: {
   }
 })
diff --git a/app.json b/app.json
@@ -7,7 +7,7 @@
   "tabBar": {
     "color": "#000000",
     "selectedColor": "#3cc51f",
-    "borderStyle": "#f6f6f6",
+    "borderStyle": "white",
     "backgroundColor": "#ffffff",
     "list": [{
       "pagePath": "pages/douban/in_theathers/in_theathers",

diff --git a/app.wxss b/app.wxss
@@ -78,3 +78,19 @@
   background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
   background-size: 100%;
 }
+.load-more-wrap{
+  text-align: center;
+  padding: 10px 20px 20px 20px;
+}
+.load-content{
+  padding: 5px;
+  color: #666;
+}
+.btn-load-more text{
+  display: block;
+  padding: 5px;
+  border-radius: 3px;
+  background: #e6e6e6;
+  color: #666;
+  text-align: center;
+}
diff --git a/pages/douban/coming_soon/coming_soon.js b/pages/douban/coming_soon/coming_soon.js
@@ -1,8 +1,11 @@
 var functions = require('../functions.js')
+var start = 0, pageSize = 20
 Page({
   data: {
     films: [],
-    showLoading: true
+    hasMore: true,
+    showLoading: true,
+    loadMoreLoading: false
   },
   onPullDownRefresh: function () {
     console.log('onPullDownRefresh', new Date())
@@ -11,22 +14,46 @@ Page({
     console.log(e)
   },
   onLoad: function () {
-      var that = this
-      functions.getCity(function(city){
-        fetch('https://api.douban.com/v2/movie/coming_soon?city=' + city).then(function(response){
-          if(response.status !== 200){
-              console.log("error："+response.status)
-              return
-          }
-          response.json().then(function(data){
-              that.setData({
-                films: data.subjects,
-                showLoading: false
-              })
+    var that = this
+    functions.getCity(function(city){
+      that.fetchData('https://api.douban.com/v2/movie/coming_soon?city=' + city, 0, pageSize, function(data){
+        start = data.subjects.length
+        that.setData({
+          films: data.subjects,
+          showLoading: false
+        })
+      })
+    })
+  },
+  fetchData: function(url, start, count, cb){
+    var that = this
+    start = start || 0
+    count = count || 20
+    fetch(url + '&start=' + start + '&count=' + count).then(function(response){
+      response.json().then(function(data){
+        cb(data)
+      })
+    })
+  },
+  loadMore: function(){
+    var that = this
+    functions.getCity(function(city){
+      that.setData({
+        loadMoreLoading: true
+      })
+      that.fetchData('https://api.douban.com/v2/movie/coming_soon?city=' + city, start, pageSize, function(data){
+        if(data.subjects.length === 0){
+          that.setData({
+            hasMore: false
           })
+        }
+        start += data.subjects.length
+        that.setData({
+          films: that.data.films.concat(data.subjects),
+          loadMoreLoading: false
         })
-      }
-    )
+      })
+    })
   },
   viewDetail: functions.viewDetail
 })
diff --git a/pages/douban/coming_soon/coming_soon.wxml b/pages/douban/coming_soon/coming_soon.wxml
@@ -1,39 +1,62 @@
-<view class="page-loading {{showLoading ? '' : 'hide'}}">
-  <text class="weui-loading"/><text class="loading-text">玩命加载中</text>
-</view>
-<scroll-view style="height: 100%;" scroll-y="true" class="container film-list" bindscroll="scroll">
-  <block wx:for-items="{{films}}" wx:for-item="film">
-    <view class="film-item" bindtap="viewDetail" data-id="{{film.id}}" data-title="{{film.title}}">
-      <view class="film-image">
-        <image src="{{film.images.medium}}"></image>
-      </view>
-      <view class="film-info">
-        <view>
-          <text class="film-title">{{film.title}}</text>
-          <text class="film-year">{{film.year}}</text>
+<block wx:if="{{showLoading}}">
+  <view class="page-loading">
+    <text class="weui-loading"/><text class="loading-text">玩命加载中</text>
+  </view>
+</block>
+<block wx:else>
+  <scroll-view style="height: 100%;" scroll-y="true" class="container film-list" bindscroll="scroll">
+    <block wx:for-items="{{films}}" wx:for-item="film">
+      <view class="film-item" bindtap="viewDetail" data-id="{{film.id}}" data-title="{{film.title}}">
+        <view class="film-image">
+          <image src="{{film.images.medium}}"></image>
         </view>
-        <view class="film-rating">
-          <block wx:if="{{film.rating.average > 0}}">
-            <text class="label">评分</text>
-            <text class="rating">{{film.rating.average}}</text>
+        <view class="film-info">
+          <view>
+            <text class="film-title">{{film.title}}</text>
+            <text class="film-year">{{film.year}}</text>
+          </view>
+          <view class="film-rating">
+            <block wx:if="{{film.rating.average > 0}}">
+              <text class="label">评分</text>
+              <text class="rating">{{film.rating.average}}</text>
+            </block>
+            <block wx:else>
+              <text class="label">暂无评分</text>
+            </block>
+          </view>
+          <view class="directors">
+            <text class="label">导演</text>
+            <block wx:for-items="{{film.directors}}" wx:for-item="director">
+              <text class="person">{{director.name}}</text>
+            </block>
+          </view>
+          <view class="casts">
+            <text class="label">主演</text>
+            <block wx:for-items="{{film.casts}}" wx:for-item="cast">
+              <text class="person">{{cast.name}}</text>
+            </block>
+          </view>
+        </view> 
+      </view>
+    </block>
+    <view class="load-more-wrap">
+        <block wx:if="{{hasMore}}">
+          <block wx:if="{{loadMoreLoading}}">
+            <view class="load-content">
+              <text class="weui-loading"/><text class="loading-text">玩命加载中</text>
+            </view>
           </block>
           <block wx:else>
-            <text class="label">暂无评分</text>
-          </block>
-        </view>
-        <view class="directors">
-          <text class="label">导演</text>
-          <block wx:for-items="{{film.directors}}" wx:for-item="director">
-            <text class="person">{{director.name}}</text>
+            <view class="btn-load-more" bindtap="loadMore">
+              <text>点击加载更多</text>
+            </view>
           </block>
-        </view>
-        <view class="casts">
-          <text class="label">主演</text>
-          <block wx:for-items="{{film.casts}}" wx:for-item="cast">
-            <text class="person">{{cast.name}}</text>
-          </block>
-        </view>
-      </view> 
-    </view>
-  </block>
-</scroll-view>
+        </block>
+        <block wx:else>
+          <view class="load-content">
+            <text>没有更多内容了</text>
+          </view>
+        </block>
+      </view>
+  </scroll-view>
+</block>
diff --git a/pages/douban/detail/detail.js b/pages/douban/detail/detail.js
@@ -1,4 +1,3 @@
-var util = require('../../../utils/util.js')
 Page({
   data: {
     film: {},
@@ -13,7 +12,7 @@ Page({
   onLoad: function (options) {
     var that = this
     var id = options.id
-    
+
     fetch('https://api.douban.com/v2/movie/subject/' + id).then(function(response){
       if(response.status !== 200){
         console.log("error："+ response.status)
@@ -25,6 +24,6 @@ Page({
           options: options
         })
       })
-    }) 
+    })
   }
-})
+})
diff --git a/pages/douban/in_theathers/in_theathers.js b/pages/douban/in_theathers/in_theathers.js
@@ -1,8 +1,11 @@
 var functions = require('../functions.js')
+var start = 0, pageSize = 20
 Page({
   data: {
     films: [],
-    showLoading: true
+    hasMore: true,
+    showLoading: true,
+    loadMoreLoading: false
   },
   onPullDownRefresh: function () {
     console.log('onPullDownRefresh', new Date())
@@ -11,21 +14,46 @@ Page({
     console.log(e)
   },
   onLoad: function () {
-      var that = this
-      functions.getCity(function(city){
-        fetch('https://api.douban.com/v2/movie/in_theaters?city=' + city).then(function(response){
-          if(response.status !== 200){
-              console.log("error："+ response.status)
-              return
-          }
-          response.json().then(function(data){
-              that.setData({
-                films: data.subjects,
-                showLoading: false
-              })
+    var that = this
+    functions.getCity(function(city){
+      that.fetchData('https://api.douban.com/v2/movie/in_theaters?city=' + city, 0, pageSize, function(data){
+        start = data.subjects.length
+        that.setData({
+          films: data.subjects,
+          showLoading: false
+        })
+      })
+    })
+  },
+  fetchData: function(url, start, count, cb){
+    var that = this
+    start = start || 0
+    count = count || 20
+    fetch(url + '&start=' + start + '&count=' + count).then(function(response){
+      response.json().then(function(data){
+        cb(data)
+      })
+    })
+  },
+  loadMore: function(){
+    var that = this
+    functions.getCity(function(city){
+      that.setData({
+        loadMoreLoading: true
+      })
+      that.fetchData('https://api.douban.com/v2/movie/in_theaters?city=' + city, start, pageSize, function(data){
+        if(data.subjects.length === 0){
+          that.setData({
+            hasMore: false
           })
+        }
+        start += data.subjects.length
+        that.setData({
+          films: that.data.films.concat(data.subjects),
+          loadMoreLoading: false
         })
       })
+    })
   },
   viewDetail: functions.viewDetail
 })