微信小程式-05 表格
阿新 • • 發佈:2018-11-13
目錄
效果
前端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;
}