微信小程序实现评教系统（教师页面）的代码全教程

微信小程序实现评教系统（教师页面）的代码全教程

在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 });        }      })    },  

最后页面为：