小程序开发之小练习01

1. 创建项目

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

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

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

detail.json

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

2.显示列表

2.1 效果图

2.2 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.3 布局 test.wxml

<!--pages/test/test.wxml-->
<view class='item' wx:for="{{imgs}}" wx:for-item="girl" wx:key="girl" data-pos='{{index}}' data-item='{{girl}}' bindtap='itemClick'>
  <view class='group'>
    <!-- 显示所属girl的图片url 和 描述（描述 居然 是 日期 - -！） -->
    <image style='width : 100%' src='{{girl.url}}'></image>
    <text style='text-align: right;display:block'>{{girl.desc}}</text>
  </view>
</view>

2.4 test.wxss

.item{
  width: 50%;
  display: inline-flex
}

.group{
  width: 100%;
  padding: 2px
}

3. 详情页

3.1 效果图

3.2 detail.js

// pages/detail/detail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    item: {}
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options);
    console.log(`索引值为：${options.pos}`);
    this.setData({
      item: JSON.parse(options.item)
    });
    console.log(`当前图片的链接为->${this.data.item.url}`);
    wx.setNavigationBarTitle({
      title: `详情【${options.pos}】`
    })
  },
});

3.3 布局 detail.wxml

<!--pages/detail/detail.wxml-->
<image class='img' src='{{item.url}}' mode='widthFix'></image>

3.4 detail.wxss

page{
  height: 100%;
  background-color: #000000;
  display: flex;
  justify-content: center; 
  align-items: center;
}
.img {
  width: 100%;
}