上拉加载下拉刷新

app.js

@@ -5,7 +5,7 @@ App({
   onLaunch: function(options) {
     this.options = options
     // 用户登录
-    // this.checkUserLogin()
+    this.checkUserLogin()
   },
 
   onShow: function(options) {
@@ -22,13 +22,13 @@ App({
    */
   checkUserLogin: function(callback) {
     let _app = this
-    if (_app.globalData.userInfo == null || !wx.getStorageSync('token')) {
+    if (!wx.getStorageSync('token')) {
       wx.navigateTo({
         url: '/pages/auth/index',
       })
     } else {
       api.me.info().then(res => {
-        console.log(res)
+        _app.globalData.userInfo = res.data
       })
     }
   },

components/more/index.js

+// components/more/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    hasMore: {
+      type: Boolean,
+      value: false
+    },
+    loading: {
+      type: Boolean,
+      value: false
+    },
+    page: {
+      type: Number,
+      value: 1
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})
\ No newline at end of file

components/more/index.json

+{
+  "component": true,
+  "usingComponents": {
+    "i-divider": "/iview/divider/index",
+    "i-spin": "/iview/spin/index"
+  }
+}
\ No newline at end of file

components/more/index.wxml

+<!--components/more/index.wxml-->
+<view class='more-wrapper'>
+  <view class="spinner" hidden="{{!(hasMore && loading)}}">
+    <i-spin i-class="spin"></i-spin>
+  </view>
+  <view class="more-wrapper__line" hidden="{{hasMore || page == 1}}">
+    <i-divider content="加载已经完成,没有其他数据"></i-divider>
+  </view>
+</view>
\ No newline at end of file

components/more/index.wxss

+/* components/more/index.wxss */
+
+.more-wrapper {
+  position: relative;
+  padding: 8px 0;
+}
+
+.spinner {
+  text-align: center;
+}
+
+.spin {
+  display: inline-block;
+}

pages/guide/index.js

 // pages/guide/index.js
+import api from '../../utils/Api.js'
+import Schedule from '../../utils/Schedule.js'
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+    guides: [],
 
+    currentPage: 1,
+    loading: true,
+    hasMore: true,
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
-
+  onLoad: function(options) {
+    this.getListData()
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady: function () {
+  onReady: function() {
 
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
+  onShow: function() {
 
   },
 
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
-  onPullDownRefresh: function () {
-
+  onPullDownRefresh: function() {
+    this.setData({
+      tasks: [],
+
+      loading: true,
+      hasMore: true,
+      currentPage: 1
+    })
+    wx.showNavigationBarLoading()
+    wx.showLoading({
+      title: '加载中...',
+    })
+    new Schedule().task(this.getListData).delay(1600).task(() => {
+      wx.hideNavigationBarLoading()
+      wx.stopPullDownRefresh()
+      wx.hideLoading()
+    })
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
-  onReachBottom: function () {
-
+  onReachBottom: function() {
+    let that = this
+    if (that.data.loading || !that.data.hasMore) {
+      return;
+    } else {
+      let page = that.data.currentPage + 1
+      new Schedule().task(() => {
+        that.setData({
+          loading: true,
+          currentPage: page
+        })
+      }).delay(1000).task(that.getListData)
+    }
   },
 
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage: function () {
+  onShareAppMessage: function() {
+
+  },
 
+  getListData: function(callback) {
+    const p = this.data.currentPage
+    api.guide.list({
+      p
+    }).then(res => {
+      if (res.code) {
+        this.setData({
+          hasMore: false,
+          loading: false
+        })
+      } else {
+        this.setData({
+          guides: res.data,
+          loading: false,
+          hasMore: res.data && res.data.length > 0 ? true : false,
+          currentPage: res.data && res.data.length > 0 ? p : (p - 1)
+        })
+        typeof callback == "function" && callback()
+      }
+    })
   }
 })
\ No newline at end of file

pages/guide/index.json

 {
-  "navigationBarTitleText": "美行攻略"
+  "navigationBarTitleText": "美行攻略",
+  "enablePullDownRefresh": true,
+  "usingComponents": {
+    "i-cell": "/iview/cell/index",
+    "more": "/components/more/index"
+  }
 }
\ No newline at end of file

pages/guide/index.wxml

 <!--pages/guide/index.wxml-->
-<text>pages/guide/index.wxml</text>
+<view class='v-page'>
+  <view class='guides-container'>
+    <view class="guide-wrapper" wx:for="{{guides}}" wx:for-item="n" wx:key="n.id">
+      <image class='image' src="{{n.poster}}" mode='aspectFill'></image>
+      <view class='info'>
+        <view class='text-small intro'>{{n.intro ? n.intro : 'aaa测试'}}</view>
+        <view class='text-small text-hint'>
+          <text class='tag' wx:for="{{n.tags}}" wx:for-index="idx" wx:key="idx" wx:for-item="t">{{t}}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+  <more hasMore="{{hasMore}}" loading="{{loading}}" page="{{currentPage}}" />
+</view>
\ No newline at end of file

pages/guide/index.wxss

 /* pages/guide/index.wxss */
 
+.v-page {
+  position: relative;
+}
+
+.guides-container {
+  position: relative;
+  padding: 10px;
+  background-color: #fff;
+}
+
+.guide-wrapper {
+  position: relative;
+  display: flex;
+  align-content: center;
+  border-bottom: 1px solid #eee;
+  padding: 12px 0;
+  box-sizing: border-box;
+}
+
+.guide-wrapper:last-child {
+  border-bottom: none;
+}
+
+.guide-wrapper .image {
+  width: 130px;
+  height: 95px;
+  display: inline-block;
+}
+
+.guide-wrapper .info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 5px 10px;
+  color: rgb(51, 51, 51);
+}
+
+.guide-wrapper .info .intro {
+  font-size: 14px;
+}
+
+.guide-wrapper .info .tag {
+  margin-right: 4px;
+}

pages/index/index.wxss

@@ -81,3 +81,7 @@ page {
   padding: 5px 10px;
   color: rgb(51, 51, 51);
 }
+
+.guide-item .info .intro {
+  font-size: 14px;
+}

pages/me/index.js

 // pages/me/index.js
+import api from '../../utils/Api.js'
+const app = getApp()
+
 Page({
 
   /**
@@ -11,56 +14,29 @@ Page({
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
+  onLoad: function(options) {
 
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady: function () {
+  onReady: function() {
 
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
+  onShow: function() {
+    this.getUserInfo()
   },
 
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
+  getUserInfo: function() {
+    api.me.info().then(res => {
+      if (!res.code) {
+        app.globalData.userInfo = res.data
+      }
+    })
   }
 })
\ No newline at end of file

pages/me/index.wxml

@@ -14,7 +14,7 @@
 
   <!-- 我的订单 -->
   <i-cell-group>
-    <i-cell title="我的订单" is-link url="/pages/dashboard/index">
+    <i-cell title="我的订单" is-link url="/pages/me/order/index">
       <text slot="footer" class='text-gray'>全部</text>
     </i-cell>
     <i-row i-class="order-status-box">

utils/Api.js

@@ -74,5 +74,6 @@ export default {
   home,
   guide,
   search,
-  saveFormId
+  saveFormId,
+  me
 }
\ No newline at end of file