在teacher.wxml裡寫如下程式碼：

<!--pages/teacher/teacher.wxml-->
<view class='container'>
<view class="header">
<text>評教系統-教師端</text>
</view>

<view class='section'>
<view  wx:for="{{teachers}}">
<view class='section1'>
<view class='photo'>
<image class='img' src='/images/2.jpg' mode="aspectFill"></image>
</view>
<view class='menu'>
<view class='name'>姓名：{{item.teachername}}</view>
<view class='course'>任課：{{item.course}}</view>
</view>
<view class='btn'>
<!-- <button class='ly' form-type="submit" type="primary">留言</button>
<button class='ly' form-type="submit" type="warn">評教</button> -->
<navigator open-type='navigate' url="">留言</navigator>
<navigator open-type='navigate' url='../testpaper/testpaper?teacherid={{item.teacherid}}'>評教</navigator>
</view>
</view> 
</view>
</view> 
</view>
 

在teachers.wxss修改樣式

/* pages/teacher/teacher.wxss */
.container{
  height: 100%;
  display: flex;
   flex-direction: column; 
   align-items: center; 
   justify-content: space-between; 
   padding: 0 30rpx;  
  box-sizing: border-box;
}
.header{
  margin-top: 10px;
}
.section{
  width: 100%;
  height: 100%;
   background-color: whitesmoke; 
  margin-top: 10px;
}
.section1{
  width: 100%;
  height: 100px;
   border-bottom: solid 1px #999;
}
 
 .photo{
  width: 120px;
  height: 200px;
  margin-left: 10px;
 }  
.img{
  width: 80px;
  height: 80px;
  margin-top: 10px; 
  margin-left: 10px;
}  
.menu{
  margin-left: 140px;
  margin-top: -190px;
}
.name{
  color: darkcyan;
  font-size: 14px;
}
.course{
   font-size: 13px;
   color: #999;
    margin-top: 4px; 
}
.btn{
  margin-left: 120px;
  margin-top: 15px;
  display: flex;
  flex-direction: row;
}
navigator{
  width: 50px;
  height: 25px;
  font-size: 12px;
  line-height: 25px;
  text-align: center;
  border: solid 1px #ccc;
  margin-left: 15px;
} 
 

在teachers.js裡來處理使用者的操作

/**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    var url ="https://www.lishuming.top/pj/index.php/student/api/teachers";
    var student = wx.getStorageSync('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 });
      }
    })
  },
 

最後頁面為：