1. 程式人生 > >微信小程式學生列表顯示學生資訊

微信小程式學生列表顯示學生資訊

首先建立學生列表前臺頁面,接收顯示學生資訊,例如在page.wxml中:

<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>
在page.js中
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資料中的學生資訊顯示出來。