微信小程序-----校园头条详细开发之列表展示数据

1.分类列表数据展示功能的实现

1.1 结构

 

1.2 代码实现

1.2.1  列表显示数据，。每次界面显示6条数据，发请求获取数据，动态存放

var app = getApp()
Page({

  data: {
    categoryId: 1,
    id: 0,
    hideHeader: true,
    hideBottom: true,
    // refreshTime: \'\', // 刷新的时间 
    contentlist: null, // 列表显示的数据源
    controls: true,
    allPages: null, // 总页数
    currentPage: 1, // 当前页数  默认是1
    loadMoreData: \'加载更多……\'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.getData();
  },
  // 上拉加载更多
  loadMore: function() {
    var self = this;
    // 当前页是最后一页
    if (self.data.currentPage == self.data.allPages) {
      self.setData({
        loadMoreData: \'我也是有底线的\'
      })
      return;
    }
    setTimeout(function() {
      console.log(\'上拉加载更多\');
      var tempCurrentPage = self.data.currentPage;
      tempCurrentPage = tempCurrentPage + 1;
      self.setData({
        currentPage: tempCurrentPage,
        hideBottom: false
      })
      self.getData();
      self.setData({
        hideBottom: true
      })
    }, 300);
  },
  // 下拉刷新
  refresh: function(e) {
    var self = this;
    setTimeout(function() {
      console.log(\'下拉刷新\');
      var date = new Date();
      self.setData({
        currentPage: 1,
        
        hideHeader: false
      })
      self.getData();
      // self.setData({
      //   hideHeader: true
      // })
    }, 300);
  },
  // 获取数据  pageIndex：页码参数
  getData: function() {
    var self = this;
    var pageIndex = self.data.currentPage;
    var categoryId = self.data.categoryId;

    wx.request({
      url: \'http://xxxxxx:8080/webchat/list/queryinfolist\',
      data: {
        schoolId: app.globalData.userInfo.schoolid,
        categoryId: categoryId,
        pageIndex: pageIndex
      },
      success: function(res) {
        console.log(res.data)
        // console.log(dataModel)
        if (pageIndex == 1) { // 下拉刷新
          self.setData({
            allPages: res.data.data.allPages,
            contentlist: res.data.data.messages,
            hideHeader: false
          })
        } else { // 加载更多
          console.log(\'加载更多\');
          var tempArray = self.data.contentlist;
          tempArray = tempArray.concat(res.data.data.messages);
          self.setData({
            allPages: res.data.data.allPages,
            contentlist: tempArray,
            hideBottom: false
          })

        }
      },
      fail: function() {

      }
    })
  },
  onClikedetail: function(e) {
    var that = this;
    that.setData({
      id: e.currentTarget.dataset.goodsid
    })
    wx.navigateTo({
      url: \'../content/content?id=\' + that.data.id,
    })
  }
})

.js

 

1.3  技术难点

1）实现下拉刷新，上拉加载的功能

 

2）列表的展示