当前位置:源码库-建站教程-网站开发-微信小程序开发-微信小程序实现评教系统(教师页面)的代码全教程

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

时间:2018-05-10来源:anyangjie11的博客 作者:anyangjie11 文章热度:

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

微信小程序,微信小程序代码,小程序开发,评教系统

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

最后页面为:

微信小程序,微信小程序代码,小程序开发,评教系统


注:相关教程知识阅读请移步到微信小程序开发频道。
相关微信小程序开发
热门标签

微信小程序开发Rss订阅微信小程序开发搜索