微信小程式：教師評分系統（試題頁）
阿新 • • 發佈：2019-01-29
一、實現試題左右滑動功能
試卷的試題頁採用滑塊檢視容器（swiper）可以更方便檢視試題。
從 1.4.0 開始，change事件返回detail中包含一個source欄位，表示導致變更的原因，可能值如下：
autoplay 自動播放導致swiper變化；
touch 使用者划動引起swiper變化；
其他原因將用空字串表示。
注意：其中只可放置<swiper-item/>元件，否則會導致未定義的行為。
swiper-item：僅可放置在<swiper/>元件中，寬高自動設定為100%。
示例頁面：
<view class="header"> <view class="head"> <view class="header-name"><text>被評老師：</text><text style='font-size:60rpx;'>{{teachername}}</text></view> <view style="margin-top:10px;">{{papertype}}</view> <view class="image"> <image style="width:70px;height:70px;" src="../../images/teacher.jpg"></image> </view> </view> </view> <view class="content"> <swiper indicator-dots="{{indicatorDots}}" bindchange="swiper_change" current="{{currentid}}"> <swiper-item wx:for="{{papers}}"> <view class="content-pj">{{index+1}}.{{item.content}}</view> <radio-group class="radio-group" bindchange="item_change" data-id="{{item.id}}"> <label wx:if="{{item.itema!=''}}"> <radio value='a#{{item.scorea}}' bindtap='next'><text>A {{item.itema}}</text></radio> </label> <label wx:if="{{item.itemb!=''}}"> <radio value='b#{{item.scorea}}' bindtap='next'><text>B {{item.itemb}}</text></radio> </label> <label wx:if="{{item.itemc!=''}}"> <radio value="c#{{item.scorec}}=" bindtap='next'><text>C {{item.itemc}}</text></radio> </label> <label wx:if="{{item.itemd!=''}}"> <radio value="d#{{item.scored}}=" bindtap='next'><text>D {{item.itemd}}</text></radio> </label> </radio-group> </swiper-item> </swiper> </view> <button form-type='submit' type="default" disabled="{{btn_disabled}}" bindtap="mysubmit">提交</button>
如果在 bindchange 的事件回撥函式中使用 setData 改變 current 值，則有可能導致 setData 被不停地呼叫，因而通常情況下請在改變 current 值前檢測 source 欄位來判斷是否是由於使用者觸控引起。
程式碼如下：
swiper_change: function (e) {
if (e.detail.source == 'touch') {
this.setData({ currentid: e.detail.current })
}
}二、實現評教資料的處理 {"4":"a","5":"b","6":"c"}
採用單項選擇器（radio-group）可以實現選項的自由選擇，內部由多個<radio/>組成。
Bindchange：<radio-group/> 中的選中項發生變化時觸發 change 事件，event.detail = {value: 選中項radio的value}
每個選項都代表一個分值：A:10,B:8，C:6，D:4
最後結果：{"4":"a","5":"b","6":"c"}
引數：pjid 評教id
testpaperid 問卷id
answer 評教結果 {"4":"a","5":"b","6":"c"}
student 學生資訊{"no":"1635050110", "name":"張三", "classid":"1000-1603"}
message 留言
score 分值
程式碼如下：
data: {
teachername: null,
currentid: 0,
count: 5,
papertype: null,
papers: null,
pj:null,
answer: {},
score: {},
btn_disabled: true
},
swiper_change: function (e) {
if (e.detail.source == 'touch') {
this.setData({ currentid: e.detail.current })
}
},
item_change: function (e) {
var value = e.detail.value;
var arr=value.split('#');
var _answer = this.data.answer;
var _score = this.data.score;
_answer[e.currentTarget.dataset.id]=arr[0];
_score[e.currentTarget.dataset.id] = arr[1];
this.setData({answer:_answer,score:_score});
var len=0;
for(var i in _answer){
len++;
}
if(len<this.data.count){
this.setData({btn_disabled:true});
}else{
this.setData({ btn_disabled: false });
}
// setTimeout(this.next, 2000);
},
//點選下一頁按鈕
next: function (e) {
var index = this.data.currentid;//獨取變數的值
index++;
if (index >= this.data.count) {
index = this.data.count - 1;
}
this.setData({ currentid: index });//給變數賦值
}三：提交功能，評教成功和已評教過功能
評教型別一般分為：常規評教和統一評教。常規評教可以評教多次，統一評教僅可以評教一次。接下來實現所以試題都寫完才可以提交，然後顯示“評教成功！”，常規評教可以多次重複完成評教，而統一評教僅可以評教一次，第一次顯示“評教成功！”，之後顯示“您已經評測！”。
程式碼如下：
//提交
mysubmit:function(){
var _score = 0;
for (var i in this.data.score) {
_score += parseInt(this.data.score[i]);
}
//學生資訊
var student = wx.getStorageSync('student');
var _student = { no: student.no, name: student.name, classid: student.classid };
wx.request({
url: "https://www.lishuming.top/pj/index.php/student/api/pj",
method: 'POST',
data: {
pjid: this.data.pj.pjid,
testpaperid: this.data.pj.testpaperid,
message: '',
answer: JSON.stringify(this.data.answer),
student: JSON.stringify(_student),
score: _score
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {
console.log(res.data);
wx.showToast({
title: '評教成功',
icon: 'success',
duration: 2000
})
}
})
}完整的js程式碼如下：
// pages/paperdetails/paperdetails.jsPage({ /** * 頁面的初始資料 */ data: { teachername: null, currentid: 0, count: 5, papertype: null, papers: null, pj:null, answer: {}, score: {}, btn_disabled: true }, swiper_change: function (e) { if (e.detail.source == 'touch') { this.setData({ currentid: e.detail.current }) } }, item_change: function (e) { var value = e.detail.value; var arr=value.split('#'); var _answer = this.data.answer; var _score = this.data.score; _answer[e.currentTarget.dataset.id]=arr[0]; _score[e.currentTarget.dataset.id] = arr[1]; this.setData({answer:_answer,score:_score}); var len=0; for(var i in _answer){ len++; } if(len<this.data.count){ this.setData({btn_disabled:true}); }else{ this.setData({ btn_disabled: false }); } // setTimeout(this.next, 2000); }, //點選下一頁按鈕 next: function (e) { var index = this.data.currentid;//獨取變數的值 index++; if (index >= this.data.count) { index = this.data.count - 1; } this.setData({ currentid: index });//給變數賦值 }, //提交 mysubmit:function(){ var _score = 0; for (var i in this.data.score) { _score += parseInt(this.data.score[i]); } //學生資訊 var student = wx.getStorageSync('student'); var _student = { no: student.no, name: student.name, classid: student.classid }; wx.request({ url: