微信小程序~ Reading 页面布局 + 数据绑定

效果图如下：只需要一个标题以及类型和时间

这里的难点就是布局的样式表，对于没有过Web前端开发经验的笔者，只能一步一步摸着石头过河了，还有一点是接口返回的时间格式需要我们去格式化，笔者这里只是简单的截取，并没有进行时间的转化。

`reading.wxml`布局如下

<view>
  <block wx:for="{{ganks}}" wx:for-item="item" wx:for-index="idx">
    <view class='container' catchtap="onGankTap" data-postUrl="{{item.url}}">
      <text class='desc-container' data-postDesc="{{item.desc}}">{{item.desc}}</text>
      <view class='type-date-container'>
        <view class='type-container'>
          <text class='type'>{{item._type}}</text>
        </view>
        <view class='date-container'>
          <text class='date'>{{item.publishedAt}}</text>
        </view>
      </view>
    </view>
  </block>
</view>

该布局可以拆分为：标题+标签、时间 两部分。因为是列表，所以我们只要写一份该布局然后用for循环即可实现整体列表。

for语句的使用可以参考 官方文档—框架—视图层—WXS—语句
wx:for="{{ganks}}" wx:for-item="item" wx:for-index="idx" 其中wx:for="{{ganks}}使用了数据绑定的方式，这里的意思是循环遍历ganks这个集合中的数据，记得数据绑定是要用{{}}将数据括起来哦~。
wx:for-item="item" 表示每一个item的数据对象，通过item这个对象可以取出该对象中的其他属性。
wx:for-index="idx" 其中idx是自己定义的表示每个item对于的序号，从0开始哦。

`reading.wxss`样式表代码如下

.container {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  background-color: yellowgreen;
  border-top: 1px solid #ededed;
  padding: 40rpx 16rpx 40rpx 16rpx;
}

.desc-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  letter-spacing: 3rpx;
  text-align: left;
  color: #fff;
  padding-bottom: 5px;
}

.type-date-container {
  width: 100%;
  height: 40rpx;
  display: flex;
  flex-direction: row;
  margin-left: 16rpx;
  margin-right: 16rpx;
  margin-top: 20rpx;
}

.type-container {
  display: flex;
  flex-direction: row;
  border: 1px solid #fff;
  width: 200rpx;
  height: 40rpx;
  border-radius: 5px;
  text-align: center;
  color: #fff;
}

.type {
  display: flex;
  flex-direction: row;
  font-size: 24rpx;
  font-weight: bold;
  color: #fff;
  text-align: justify;
  padding: 2rpx 20rpx 0rpx 50rpx;
}

.date-container {
  display: flex;
  flex-direction: row;
  float: right;
  position: absolute;
  right: 0;
  margin-right: 16rpx;
}

.date {
  font-size: 24rpx;
  font-weight: bold;
  line-height: 40rpx;
  color: #fff;
  margin-right: 16rpx;
}

reading.wxss 和之前写的样式表，多了几个不认识的属性，下面就来简单介绍一下，需要更深入学习可以参考 CSS3 教程 或者是 菜鸟教程

.container item内容布局的样式分析：

width:100%表示宽度占满屏幕
height: auto表示高度适应内容的高度
flex-direction: column; 表示每个item中的内容是垂直排布，因为顶上一层是标题，下面一层是类型和时间
background-color: yellowgreen;每个item布局的背景色是黄绿色
border-top: 1px solid #ededed;每个item布局的边框为1px宽度的线solid表示实体填充，最后一个是填充的颜色。
padding: 40rpx 16rpx 40rpx 16rpx;表示内边距，从左到右的顺序分别是上，右，下，左。

.desc-container标题样式主要属性分析：

letter-spacing: 3rpx;表示字体的间距是3rpx
text-align: left;表示内容的文本是左对齐

.type-container分类主布局的样式主要属性分析：

border-radius: 5px;表示分类的边框圆角是5px

扫描二维码关注公众号，回复： 2951532 查看本文章

.type分类文本样式主要属性分析：

font-weight: bold;表示字体加粗
text-align: justify;表示分类的文本设置为两端对齐

.date-container 时间样式主要属性分析：

float: right;表示在右边对齐
position: absolute;表示绝对定位
right: 0;在使用了绝对定位后，使用这个属性可以将view放置在距离右边0px的位置

`reading.js` 业务逻辑处理

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ganks: {},
    requestUrl:'',
    pageSize:10,
    page:1,
    isEmpty: true,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var baseUrl = "http://gank.io/api/data/all/" ;
    var url = baseUrl + this.data.pageSize + "/" + this.data.page;
    this.data.requestUrl = baseUrl ;
    // console.log("url--->"+url);
    this.getGankData(url);

    wx.setNavigationBarTitle({
      title: '全部干货'
    })
  },

  getGankData: function (url) {
    var that = this;
    wx.request({
      url: url,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function (res) {
        that.processGankData(res.data.results);
      },
      fail: function (error) {
        console.log('错误信息是：' + error);
      }
    })
  },

  /**
   * 处理干货数据
   */
  processGankData: function (gankData) {
    var ganks = [];
    for (var idx in gankData) {
      var subject = gankData[idx];
      var time = subject.publishedAt;
      var time1 = time.replace('T',' ')
      var date = time1.substring(0,19);
      var temp = {
        desc: subject.desc,
        publishedAt: date,
        _type: subject.type,
        _id: subject._id,
        url: subject.url
      }
      ganks.push(temp)
    }
    var totalGanks = {}
    //如果要绑定新加载的数据，那么需要同旧有的数据合并在一起
    if (!this.data.isEmpty) {
      totalGanks = this.data.ganks.concat(ganks);
    }
    else {
      totalGanks = ganks;
      this.data.isEmpty = false;
    }
    wx.hideNavigationBarLoading();
    wx.stopPullDownRefresh()

    this.setData({
      ganks: totalGanks
    });
  },
  /**
   * 下拉刷新
   */
  onPullDownRefresh: function (event) {
    // 第一页
    this.data.page = 1;
    var url = this.data.requestUrl + this.data.pageSize + "/" + this.data.page;
    this.data.ganks = {};
    this.data.isEmpty = true;
    wx.showNavigationBarLoading();
    this.getGankData(url);
  },
  /**
   * 上拉加载更多
   */
  onReachBottom: function (event) {
    this.data.page = this.data.page + 1 ;
    var url = this.data.requestUrl + this.data.pageSize + "/" + this.data.page;
    this.getGankData(url);
  },
  /**
   * item 的点击事件
  */
  onGankTap:function(event){
    var detailUrl = event.currentTarget.dataset.posturl;
    var detailDesc = event.currentTarget.dataset.postdesc;
    wx.navigateTo({
      url: "reading-detail/reading-detail?url=" + detailUrl + "title=" + detailDesc
    })
  },
})

reading.js主要处理了网络数据的加载，下拉刷新操作，上拉加载操作，以及item的点击事件，在页面onLoad时还对标题栏进行设置。

下拉刷新

1. 先在 reading.json 中设置
{
  "enablePullDownRefresh": true
}

2. 再在 reading.js 中实现以下方法即可实现下拉刷新
  /**
   * 下拉刷新
   */
  onPullDownRefresh: function (event) {
    // 第一页
    this.data.page = 1;
    var url = this.data.requestUrl + this.data.pageSize + "/" + this.data.page;
    this.data.ganks = {};
    this.data.isEmpty = true;
    wx.showNavigationBarLoading();
    this.getGankData(url);
  },

3. 在处理下拉返回的数据时，需要做一些判断，如果是下拉下的数据需要同旧的数据合并。
4. 最后关闭下拉刷新 wx.stopPullDownRefresh()

上拉加载

  /**
   * 上拉加载更多
   */
  onReachBottom: function (event) {
    this.data.page = this.data.page + 1 ;
    var url = this.data.requestUrl + this.data.pageSize + "/" + this.data.page;
    this.getGankData(url);
  },

实现onReachBottom 方法即可，之后的操作和下拉刷新一样，所不同的就是二者的url不一样，上拉加载的page是递增的，而下拉刷新一直请求的是第一页的数据

Item 点击跳转页面

  /**
   * item 的点击事件
  */
  onGankTap:function(event){
    var detailUrl = event.currentTarget.dataset.posturl;
    var detailDesc = event.currentTarget.dataset.postdesc;
    wx.navigateTo({
      url: "reading-detail/reading-detail?url=" + detailUrl + "title=" + detailDesc
    })
  },

由于在reading.wxml中设置了catchtap="onGankTap"事件，所以实现该方法即可，这里使用到了页面跳转的API

title设定
在onLoad方法中设置

wx.setNavigationBarTitle({
      title: '全部干货'
    })

即可实现添加标题的另一种方式。还有另一种方式是在.json中配置