目录
效果
前端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;
}