微信小程序-05 表格

目录

 

效果

前端WXML

JS

WXSS（css）

后端代码

返回值结果格式

---

效果

前端WXML

<view class="table">
  <view class="tr bg-w">
    <view class="th">ID</view>
    <view class="th">姓名</view>
    <view class="th ">年龄</view>
  </view>
  <block wx:for="{{data}}" wx:key="{{ID}}">
    <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
      <view class="td">{{item.id}}</view>
      <view class="td">{{item.name}}</view>
      <view class="td">{{item.age}}</view>
    </view>
    <view class="tr" wx:else>
      <view class="td">{{item.id}}</view>
      <view class="td">{{item.name}}</view>
      <view class="td">{{item.age}}</view>
    </view>
  </block>
</view>

JS

data: {
      username:'',
      data:[]
  },


//-------------------------------------------------//
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.request({
//请求数据接口
      url: 'http://localhost:8080/hello',
      data: {
      },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: 'get',
      dataType: 'json',
      responseType: 'text',
      success: function (res) {
        that.setData({
          msg: res.data.msg,
          hello : res.data.hello,
//将接口返回的数据data赋值给data
          data:res.data.data
        })
      },
      fail: function (res) {
        console.log("fail=================")
      },
      complete: function (res) { },
    })
  },

WXSS（css）

/* pages/main/main.wxss */
.table {
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
}
.td {
    width:40%;
    justify-content: center;
    text-align: center;
}
.bg-w{
  background: snow;
}
.bg-g{
  background: #E6F3F9;
}
.th {
  width: 40%;
  justify-content: center;
  background: #ccc;
  color: #fff;
  display: flex;
  height: 3rem;
  align-items: center;
}

后端代码

 @RequestMapping("/hello")
    public Object hello(){
        Map<Object,Object> map = new HashMap<>();
        map.put("hello","helloworld");
        map.put("msg","request success!");
        List list = new ArrayList();
        for(int a =0;a<10;a++){
            User user = new User();
            user.setAge(10+a);
            user.setId(1001+a);
            user.setName("admin"+a);
            list.add(user);
        }
        map.put("data",list);
        return  map;
    }

返回值结果格式