Angularjs实现移动端在线测评效果(推荐)

{ "Questions":
 [
 { 
  "Question":"您的年龄范围:",
  "AnswerList":[
   {"Text":"30岁以下","Score":5,"OrderNo":0},
   {"Text":"30-39岁","Score":4,"OrderNo":1},
   {"Text":"40-49岁","Score":3,"OrderNo":2},
   {"Text":"50-59岁","Score":2,"OrderNo":3},
   {"Text":"60岁以上","Score":1,"OrderNo":4}]
 },
 { 
  "Question":"您的婚姻状况为:",
  "AnswerList":[
  {"Text":"未婚","Score":5,"OrderNo":1},
  {"Text":"已婚","Score":4,"OrderNo":2},
  {"Text":"单身有婚史","Score":3,"OrderNo":3},
  {"Text":"丧偶","Score":2,"OrderNo":4},
  {"Text":"不详","Score":1,"OrderNo":5}]
 },
 { 
  "Question":"您的收入需要用来供养其他人（如父母或子女）吗？",
  "AnswerList":[
  {"Text":"不需供养其他人","Score":5,"OrderNo":1},
  {"Text":"供养1人","Score":4,"OrderNo":2},
  {"Text":"供养2人","Score":3,"OrderNo":3},
  {"Text":"供养3人","Score":2,"OrderNo":4},
  {"Text":"供养4人或以上","Score":1,"OrderNo":5}]
 }
 ]
}

 

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 
 

  已完成 {{vm.count}}/10
 
 
 

 

  

  
{{$index + 1}}. {{question.Question}}
  

   

   {{vm.letter[$index]}}. {{answer.Text}}
   
  
  
 
 
 

 {{vm.point}}
 
 

.wrapper{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
 }
 .process-box{
  width: 17.25rem;
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: #FFF;
  margin: 1.5rem auto;
  border-radius: 0.2rem;
 }
 .page-icon{
  float: left;
  font-size: 0.4rem;
  color: #FFE7C9;
  width: 1.32rem;
  text-align: center;
 }
 .page-info{
  font-size: 0.65rem;
  color: #F3A84D;
 }
 .question-box{
  width: 17.25rem;
  background-color: #FFF;
  margin-left: 0.75rem;
  border-radius: 0.2rem;
 }
 .question{
  font-size: 0.8rem;
  color: #43689F;
  padding: 1.1rem 0 0.8rem 0.75rem;
 }
 .answer-item{
  font-size: 0.75rem;
  color: #80A1D0;
  border-top: 1px solid #EEE;
  padding: 1.1rem 0 1.1rem 1.0rem;
 }
 .icon-txt{
  background-color: orange;
  border-radius: 0.5rem;
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  line-height: 0.8rem;
  margin: 0.95rem auto;
 }
 .icon-txt-active{
  background-color: #FFE7C9;
  border-radius: 0.3rem;
  display: block;
  width: 0.3rem;
  height: 0.3rem;
  line-height: 2.0rem;
  color: #FFF;
  margin: 1.25rem auto;
 }
 .list-item {
  width: 100%;
  position: absolute;
  transform: translate3d(100%,0,0);
  transition: transform 0.5s;
 }
 .first-li {
  transform: translate3d(0,0,0);
 }
 .selected {
  background-color: orange;
 }

(function (agr) {
 //模块 - app
 var app = agr.module('app', []);
 //控制器 - 风险测评
 app.controller('RiskTestController', ['$scope', '$http', RiskTestController]);
 function RiskTestController($scope, $http) {
 var vm = this;
 vm.letter = ['A', 'B', 'C', 'D', 'E']; //答案编号
 vm.questiOnList= []; //题目
 vm.point = 0;  //得分
 vm.showResult = false; //是否显示结果页
 //加载数据 
 $http({
  method: 'GET',
  url: '/Service/RiskTest',
 }).then(function (resp) {  
  vm.questiOnList= resp.data.Questions;
 }, function (resp) {
  console.log("ERROR", resp);
 });
 var lis = document.querySelectorAll(".list-item"), //题目列表
  count = 0, //做了多少道题
  index = 0, //当前第几题
  BIG = 9; //最大索引值，因为总共10道题，所以是9（常量）
 //选择答案
 vm.OnClickAnswer= function (answer, $parentIndex) {

  var icOns= document.querySelectorAll(".icon"),
  curr = $parentIndex; //当前题目索引
  next = $parentIndex + 1; //下一题索引
  nextQuestion = vm.questionList[next]; //下一道题
  //当前问题的答案列表
  var answerList = vm.questionList[$parentIndex].AnswerList;
  //为每个答案对象添加属性 Selected, 默认值为false
  for (var i = 0, len = answerList.length; i  0 && index > 0) {
  lis[curr].style.webkitTransform = 'Translate3d(' + offsetX + 'px, 0, 0)';
  prevQuestion && (lis[prev].style.webkitTransform = 'Translate3d(' + (offsetX - width) + 'px, 0, 0)');
  }
  //手指滑动时题卡跟着手指滑动（向左滑：[偏移量小于0，即负数，并且不是最后一题]）
  if (offsetX <0 && index  1000) {
  //判断是向左滑还是向右滑
  if (offsetX > 0) {
   //判断是否达到切换偏移量
   if (offsetX >= boundary) {
   MoveToRight();
   } else {
   ResetMoveRight();
   }
  } else{
   if (offsetX <-boundary) {
   MoveToLeft();
   } else {
   ResetMoveLeft();
   }
  }
  } else {
  if (offsetX > 0) {
   if (offsetX >= quickBoundary) {
   MoveToRight();
   } else {
   ResetMoveRight();
   }
  } else {
   if (offsetX <-quickBoundary) {
   MoveToLeft();
   } else {
   ResetMoveLeft();
   }
  }
  }
 };
 //向右滑动事件
 var MoveToRight = function () {
  var curr = index,
  prev = index -1,
  prevQuestion = vm.questionList[prev];
  if (curr > 0) {
  lis[curr].style.webkitTransform = 'Translate3d(100%, 0, 0)';
  prevQuestion && (lis[prev].style.webkitTransform = 'Translate3d(0, 0, 0)');
  index--;
  }  
 }
 //右滑重置(当滑动距离没达到切换偏移量时，题卡回到原点)
 var ResetMoveRight = function () {
  var curr = index,
  prev = index -1,
  prevQuestion = vm.questionList[prev];
  lis[curr].style.webkitTransform = 'Translate3d(0, 0, 0)';
  prevQuestion && (lis[prev].style.webkitTransform = 'Translate3d(-100%, 0, 0)');
 }
 //向左滑动事件
 var MoveToLeft = function () {
  var curr = index,
  next = index + 1,
  nextQuestion = vm.questionList[next];
  if (curr