首先是搭建顯示的基本頁面

在teachers.wxml檔案中

<view class="container">
    <view class='header'>
      <text>評教系統——我要評教</text>
    </view>
    <view class="section_gap" wx:for="{{teachers}}">  
      <image style="width: 120px; height: 120px; background-color: #f0f;" mode="{{item.mode}}" src="{{src}}"></image>
      <view class='section'>
        <view class='section_one'>
          <text>{{item.teachername}}</text>
        </view>
        <view class='section_two'>
          <text>{{item.course}}</text>
        </view>
        <view class='bottom'>
          <navigator open-type="navigate" url="">留言</navigator>
          <navigator open-type="navigate" url="../testpaper/testpaper?teacherid={{item.teacherid}}">評教</navigator>
        </view>
      </view>
    </view>
</view>
 

在teachers.wxss檔案中設定頁面樣式

.section_gap{
  display: flex;
  margin-top: 20px;
   /* background-color: #ccc;  */
   /* border: solid 1px yellow;  */
}
.header{
  margin-top: 20rpx;
}
.section{
  height:120px;
  line-height: 30px; 
  display: flex;
  flex-direction: column;
   margin-left: 50rpx;  
  /* border: solid 1px #0f0;   */
}
.section_two text{
  color: #ccc;
}
.bottom{
  margin-top: 15rpx;
  display: flex;
}
navigator{
  margin: 10rpx;
  padding: 7rpx 30rpx;
  border: 1px solid red;
}
 

接下來就是呼叫介面獲取資訊

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    teachers:null,
    src: '../images/64.jpg'
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    var url ="https://www.zhangsan.top/pingjiao/index.php/student/api/teachers";

    //讀取快取
    var student = wx.getStorageSync('student');
    // console.log(student);

    var classid=student.classid;
    // console.log(classid);
    wx.request({
      url: url, //僅為示例，並非真實的介面地址
      data: {
       classid:classid
      },
      header: {
        'content-type': 'application/json' // 預設值
      },
      success:(res)=> {
        console.log(res.data)
        this.setData({teachers:res.data});
      }
    })
  
  }
})
 

最後頁面效果如下