【Kevin Learn 小程序】--＞小练习01

1. 创建项目

创建完 page 后，界面的路径会自动在 app.json 里配置好。但是注意一下，放在 pages 数组的第一个元素才是首页。

设置两个界面的标题 test.json

{
  "navigationBarTitleText": "图片列表"
}

detail.json

{
  "navigationBarTitleText": "详情界面"
}

2.显示列表

2.1 test.js

let pageNum;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgs: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    pageNum = 1;
    this.mineFunction();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("上拉");
    pageNum++;
    this.mineFunction();
  },

  /**
   * 请求数据
   */
  mineFunction: function () {
    wx.request({
      url: 'http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/' + pageNum,
      success: (res) => {
        let list = res.data.results;
        let listData = this.data.imgs; //拿到绑定的数据源
        list.forEach((values) => listData.push(values)); //遍历下载的数据
        console.log(listData);
        this.setData({
          imgs: listData //更新数据源
        })
      }
    });
  },

  /**
   * item点击事件
   * @param e
   */
  itemClick: function (e) {
    let position = e.currentTarget.dataset.pos;
    console.log("点击了第【" + position + "】" + "个元素");
    let item = e.currentTarget.dataset.item;
    wx.navigateTo({//跳转界面
      url: `../detail/detail?pos=${position}&item=${JSON.stringify(item)}`
    });
  }
});

2.2 布局 test.wxml