原生小程序分页工作记录

index.wxml


  
      
          
          
      
      
          
      
  

    
        
            
                
                    
                        
                    
                    {{item.feed_source_name}}{{item.feed_source_txt}}
                
                
            
            
                
                    
                        {{item.question}}
                    
                
                
                    
                        {{item.answer_ctnt}}
                    
                    
                        
                        
                            {{item.comment_num}} 评论 
                        
                        
                    
                
            
        
    


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;

你可能感兴趣的:(小程序,前端)