微信小程式學生列表顯示學生資訊
阿新 • • 發佈:2019-01-05
首先建立學生列表前臺頁面,接收顯示學生資訊,例如在page.wxml中:
在page.js中<view class="" wx:for="{{list}}" bindtap='modifySubmit'> //wx:for="{{list}}"接收後臺js檔案穿過來的list資料 <view class="weui-cell"> <view > <image src="{{item.path}}"></image> //顯示list資料中的學生頭像資訊 </view> <view > <view>姓名:{{item.name}}</view> //顯示list資料中的學生姓名資訊 <view>學號:{{item.no}}</view> //顯示list資料中的學生學號資訊 <view>性別:{{item.sex}}</view> //顯示list資料中的學生性別資訊 <view>年齡:{{item.age}}</view> //顯示list資料中的學生年齡資訊 </view> </view> </view>
onLoad: function (options) { wx.request({ url: 'http://000000000.com/aaaaaa/index.php/home/index/000000',//連線伺服器從表中查詢出學生資訊的介面 data: { page: page, condition: this.data.condition }, header: { 'content-type': 'application/json' }, success: (res) => { this.setData({ list: res.data,//將表中查詢出來的資訊傳給list }) } }) },
data: {
list: [] //將list的資料傳到前臺wxml頁面中
},
在前臺頁面接收js檔案傳過去的list資料,將list資料中的學生資訊顯示出來。