原生小程序分页工作记录

index.wxml

<scroll-view scroll-y="true" class="container" bindscrolltoupper="upper" upper-threshold="10" lower-threshold="5" bindscrolltolower="lower"  scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  <view class="search flex-wrp">
      <view class="search-left flex-item">
          <image src="../../images/search.png"></image>
          <input placeholder="搜索话题, 问题或人" placeholder-class="search-placeholder"/>
      </view>
      <view class="search-right flex-item" bindtap="upper">
          <image src="../../images/lighting.png"></image>
      </view>
  </view>

    <block wx:for="{{feed}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
        <view class="feed-item">
            <view class="feed-source">
                <a class="">
                    <view class="avatar">
                        <image src="{{item.feed_source_img}}"></image>
                    </view>
                    <text>{{item.feed_source_name}}{{item.feed_source_txt}}</text>
                </a>
                <image class="item-more" mode="aspectFit" src="../../images/more.png"></image>
            </view>
            <view class="feed-content">
                <view class="question" qid="{{question_id}}" bindtap="bindQueTap">
                    <a class="question-link">
                        <text>{{item.question}}</text>
                    </a>
                </view>
                <view class="answer-body">
                    <view bindtap="bindItemTap">
                        <text class="answer-txt" aid="{{answer_id}}">{{item.answer_ctnt}}</text>
                    </view>
                    <view class="answer-actions" bindtap="bindItemTap">
                        <view class="like dot">
                            <a>{{item.good_num}} 赞同 </a>
                        </view>
                        <view class="comments dot">
                            <a>{{item.comment_num}} 评论 </a>
                        </view>
                        <view class="follow-it">
                            <a>关注问题</a>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </block>
</scroll-view>

index.js

//index.js

var util = require('../../utils/util.js')
var app = getApp()
Page({
  data: {
    feed: [],
    feed_length: 0
  },
  //事件处理函数
  bindItemTap: function() {
    wx.navigateTo({
      url: '../answer/answer'
    })
  },
  bindQueTap: function() {
    wx.navigateTo({
      url: '../question/question'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    this.getData();
  },
  upper: function () {
    wx.showNavigationBarLoading()
    this.refresh();
    console.log("upper");
    setTimeout(function(){wx.hideNavigationBarLoading();wx.stopPullDownRefresh();}, 2000);
  },
  lower: function (e) {
    wx.showNavigationBarLoading();
    var that = this;
    setTimeout(function(){wx.hideNavigationBarLoading();that.nextLoad();}, 1000);
    console.log("lower")
  },
  //scroll: function (e) {
  //  console.log("scroll")
  //},

  //网络请求数据, 实现首页刷新
  refresh0: function(){
    var index_api = '';
    util.getData(index_api)
        .then(function(data){
          //this.setData({
          //
          //});
          console.log(data);
        });
  },

  //使用本地 fake 数据实现刷新效果
  getData: function(){
    var feed = util.getData2();
    console.log("loaddata");
    var feed_data = feed.data;
    this.setData({
      feed:feed_data,
      feed_length: feed_data.length
    });
  },
  refresh: function(){
    wx.showToast({
      title: '刷新中',
      icon: 'loading',
      duration: 3000
    });
    var feed = util.getData2();
    console.log("loaddata");
    var feed_data = feed.data;
    this.setData({
      feed:feed_data,
      feed_length: feed_data.length
    });
    setTimeout(function(){
      wx.showToast({
        title: '刷新成功',
        icon: 'success',
        duration: 2000
      })
    },3000)

  },

  //使用本地 fake 数据实现继续加载效果
  nextLoad: function(){
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 4000
    })
    var next = util.getNext();
    console.log("continueload");
    var next_data = next.data;
    this.setData({
      feed: this.data.feed.concat(next_data),
      feed_length: this.data.feed_length + next_data.length
    });
    setTimeout(function(){
      wx.showToast({
        title: '加载成功',
        icon: 'success',
        duration: 2000
      })
    },3000)
  }


})


index.wxss

/**index.wxss**/

.container{
  height: 1500rpx;
}
.container .search{
  width: 735rpx;
  height: 65rpx;
  padding: 12.5rpx 0 12.5rpx 15rpx;
  background: #2A8CE5;
}
.container .search-left{
  flex: 8;
  background: #4EA3E7;
  text-align: left;
}
.container .search-left input{
  display: inline-block;
  height: 65rpx;
  font-size: 26rpx;
}
.search-placeholder{
  color: #8CCEFD;
  line-height: 20rpx;
}
.container .search .search-left image{
  display: inline-block;
  width: 35rpx;
  height: 35rpx;
  padding: 15rpx 15rpx 15rpx 20rpx;
}
.container .search .search-right{
  flex: 1;
}
.container .search .search-right image{
  width: 45rpx;
  height: 45rpx;
  padding: 10rpx;
}

.container{
  padding: 0;
  font-size: 14rpx;
  background: #F0F4F3;
  color: #000;
}
/*feed-item part is in app.wxss for multiplexing*/

utils.js

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
};

var index = require('../data/data_index.js')
var index_next = require('../data/data_index_next.js')
var discovery = require('../data/data_discovery.js')
var discovery_next = require('../data/data_discovery_next.js')

function getData(url){
  return new Promise(function(resolve, reject){
    wx.request({
      url: url,
      data: {},
      header: {
        //'Content-Type': 'application/json'
      },
      success: function(res) {
        console.log("success")
        resolve(res)
      },
      fail: function (res) {
        reject(res)
        console.log("failed")
      }
    })
  })
}

function getData2(){
  return index.index;
}

function getNext(){
  return index_next.next;
}

function getDiscovery(){
  return discovery.discovery;
}

function discoveryNext(){
  return discovery_next.next;
}



module.exports.getData = getData;
module.exports.getData2 = getData2;
module.exports.getNext = getNext;
module.exports.getDiscovery = getDiscovery;
module.exports.discoveryNext = discoveryNext;




json

/**
 * Created by Rebecca_Han on 16/10/27.
 */

module.exports={

};

var next = {
    "id": 2,
    "data": [
        {
            "question_id": 9,
            "answer_id": 61,
            "feed_source_id": 25,
            "feed_source_name": "George",
            "feed_source_txt": "赞了回答9",
            "feed_source_img": "../../images/icon9.jpeg",
            "question": "气象铁塔的辐射大吗？",
            "answer_ctnt": "我不知道那个铁塔的情况，不过气象铁塔上会有一些测太阳辐射的设备，如果说辐射的话，太阳辐射那么多，大家赶紧躲进地底下呀~~~~~要不然辐射量这么大，会变异的呀~~~~",
            "good_num": "112",
            "comment_num": "18"
        },
        {
            "question_id": 10,
            "answer_id": 3,
            "feed_source_id": 23,
            "feed_source_name": "Rebecca",
            "feed_source_txt": "赞了回答10",
            "feed_source_img": "../../images/icon1.jpeg",
            "question": "选择 Kindle 而不是纸质书的原因是什么？",
            "answer_ctnt": "难道不明白纸质书更贵啊！！！ 若觉得kindle更贵，我觉得要么阅读量太少，那确实没有买kindle的必要。要么买的都是盗版的纸质书？我不清楚不加以评论。。。 另外，用kindle看小说的怎么真心不懂了...",
            "good_num": "112",
            "comment_num": "18"
        },
        {
            "question_id": 11,
            "answer_id": 25,
            "feed_source_id": 24,
            "feed_source_name": "Alex",
            "feed_source_txt": "回答了问题11",
            "feed_source_img": "../../images/icon8.jpg",
            "question": "如何评价周杰伦的「中文歌才是最屌的」的言论？",
            "answer_ctnt": "不知道题主是否是学音乐的。 音乐有公认的经典，也有明显的流行趋势没有错。但归根结底，音乐是一种艺术，艺术是很主观的东西。跟画作一个道理，毕加索是大家，但很多人看不懂他的话，甚至觉得很难看...",
            "good_num": "112",
            "comment_num": "18"
        },
        {
            "question_id": 12,
            "answer_id": 61,
            "feed_source_id": 25,
            "feed_source_name": "George",
            "feed_source_txt": "赞了回答12",
            "feed_source_img": "../../images/icon9.jpeg",
            "question": "气象铁塔的辐射大吗？",
            "answer_ctnt": "我不知道那个铁塔的情况，不过气象铁塔上会有一些测太阳辐射的设备，如果说辐射的话，太阳辐射那么多，大家赶紧躲进地底下呀~~~~~要不然辐射量这么大，会变异的呀~~~~",
            "good_num": "112",
            "comment_num": "18"
        },
        {
            "question_id": 13,
            "answer_id": 3,
            "feed_source_id": 23,
            "feed_source_name": "Rebecca",
            "feed_source_txt": "赞了回答13",
            "feed_source_img": "../../images/icon1.jpeg",
            "question": "选择 Kindle 而不是纸质书的原因是什么？",
            "answer_ctnt": "难道不明白纸质书更贵啊！！！ 若觉得kindle更贵，我觉得要么阅读量太少，那确实没有买kindle的必要。要么买的都是盗版的纸质书？我不清楚不加以评论。。。 另外，用kindle看小说的怎么真心不懂了...",
            "good_num": "112",
            "comment_num": "18"
        },
        {
            "question_id": 14,
            "answer_id": 25,
            "feed_source_id": 24,
            "feed_source_name": "Alex",
            "feed_source_txt": "回答了问题14",
            "feed_source_img": "../../images/icon8.jpg",
            "question": "如何评价周杰伦的「中文歌才是最屌的」的言论？",
            "answer_ctnt": "不知道题主是否是学音乐的。 音乐有公认的经典，也有明显的流行趋势没有错。但归根结底，音乐是一种艺术，艺术是很主观的东西。跟画作一个道理，毕加索是大家，但很多人看不懂他的话，甚至觉得很难看...",
            "good_num": "112",
            "comment_num": "18"
        },
        {
            "question_id": 15,
            "answer_id": 61,
            "feed_source_id": 25,
            "feed_source_name": "George",
            "feed_source_txt": "赞了回答15",
            "feed_source_img": "../../images/icon9.jpeg",
            "question": "气象铁塔的辐射大吗？",
            "answer_ctnt": "我不知道那个铁塔的情况，不过气象铁塔上会有一些测太阳辐射的设备，如果说辐射的话，太阳辐射那么多，大家赶紧躲进地底下呀~~~~~要不然辐射量这么大，会变异的呀~~~~",
            "good_num": "112",
            "comment_num": "18"
        },
        {
            "question_id": 16,
            "answer_id": 3,
            "feed_source_id": 23,
            "feed_source_name": "Rebecca",
            "feed_source_txt": "赞了回答16",
            "feed_source_img": "../../images/icon1.jpeg",
            "question": "选择 Kindle 而不是纸质书的原因是什么？",
            "answer_ctnt": "难道不明白纸质书更贵啊！！！ 若觉得kindle更贵，我觉得要么阅读量太少，那确实没有买kindle的必要。要么买的都是盗版的纸质书？我不清楚不加以评论。。。 另外，用kindle看小说的怎么真心不懂了...",
            "good_num": "112",
            "comment_num": "18"
        }

    ]

}
module.exports.next = next;