微信小程序学习之路（二） 循环添加信息块

有时候，我们可能会需要这样一个功能，即把数据库里的信息按照条目一条一条展示出来，类似于这样，两条或者更多，即数据库读出来有多少条数据，就展示出多少条数据

这就离不开block了.

block仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块.

接下来看代码：

<block wx:for="{{expressArray}}" wx:key="index">  
  <view class="itembox" data-index="{{index}}">
    <view  class="line1">
      <view class="line1-title">编号：</view>
      <view class="line1-content" >{{item.id}} </view>
    </view>
    <view  class="line2" >
      <view  class="line2-left1">
        <view class="line2-left1-top">姓名</view>
        <view class="line2-left1-bottom">{{item.name}} </view>
      </view>
      <view class="line2-left2" >
        <view class="line2-left2-top">出生日期</view>
        <view class="line2-left2-bottom">{{item.date}} </view>
      </view>
      <view class="line2-left3">
      <view class="line2-left3-top">居住地点</view>
        <view class="line2-left-bottom">{{item.address}} </view></view>
    </view>
    <view class="line3">
    <button bindtap="toUploadimg" class="uplosdBtn" data-index="{{index}}">编辑</button></view>
  </view>
  </block>

我们要展示的是class="itembox"的view部分，我们的数据来源于block中的wx:for，用item.XX的方式去填充数据，而XX则是与wx:for里数据相同字段的值，这里请求数据的格式为json,所以当XX为id时，即是wx:for里数据为id的值，示例：id:13234

js部分代码

//index.js
//获取应用实例
var app = getApp();
Page({
  data: {
    expressArray: [] 
  },
  toUploadimg:function(e){
//获取当前条目的index
    var index = e.currentTarget.dataset.index;
//获取数据
    var data = this.data.expressArray;
//根据当前index获取数据的id
    var id = data[index].id;
    wx.navigateTo({
//跳转新的页面，带参数id,id是具有唯一性的字段
      url: '../new/new?id='+id
    });
  }, 
  onLoad: function (options) {
//请求获取数据，当前未提供请求方法，只有模拟数据
    this.requestJson();
  },
  requestJson: function (e) {
//模拟请求到的数据为json格式的
    var dataAll = { "data": [{ "id": "12345678i9op", "name": "张1", "date": "20190901", "address": "青海省西宁市" }, { "id": "12345678i9o1", "name": "张2", "date": "20190901", "address": "青海省西宁市" }, { "id": "12345678i9o2", "name": "张3", "date": "20190901", "address": "青海省西宁市" }, { "id": "12345678i9o3", "name": "张4", "date": "20190901", "address": "青海省西宁市" }, { "id": "12345678i9o4", "name": "张5", "date": "20190901", "address": "青海省西宁市" }, { "id": "12345678i9o5", "name": "张6", "date": "20190901", "address": "青海省西宁市" }]};
//将数据赋值给全局变量uploadData，以便后面继续使用
    app.globalData.uploadData=dataAll;

    var data=dataAll.data;
    //判断数据的长度，并赋值。
   if(data.length>0){
     self.setData({
            expressArray: data
          });
}
  }
})

wxss代码

page {
  background-color: #f1f1f1;
  height: auto;
}

.itembox {
  width: 95%;
  height: 140px;
  background-color: white;
  margin-bottom: 7px;
  border: 1px solid white;
  padding-left: 10px;
}

.line1 {
  border: 1px solid white;
  height: 20px;
  margin-top: 10px;
}

.line1-title {
  float: left;
  color: rgb(153, 152, 152);
}

.line1-content {
  color: #2a35e4;
}

.line2 {
  border: 1px solid white;
  height: 60px;
  margin-top: 10px;
}

.line2-left1 {
  float: left;
  margin-right: 15px;
}

.line2-left1-top {
  margin-bottom: 10px;
  color: rgb(153, 152, 152);
}

.line2-left1-bottom {
  color: rgb(153, 152, 152);
}

.line2-left2 {
  float: left;
  margin-right: 15px;
}

.line2-left2-top {
  margin-bottom: 10px;
  color: rgb(153, 152, 152);
}

.line2-left2-bottom {
  color: rgb(153, 152, 152);
}

.line2-left3 {
  float: left;
}

.line2-left3-top {
  margin-bottom: 10px;
  color: rgb(153, 152, 152);
}

.line2-left-bottom {
  color: rgb(153, 152, 152);
}

.line3 {
  border: 1px solid white;
  height: 30px;
}

.min {
  height: 100%;
}

.uplosdBtn {
  color: #2a35e4;
  font-size: 12px;
  width: 80px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #2a35e4;
  float: left;
}