麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 小程序 > 正文

微信小程序實現多選功能

2020-03-21 16:07:58
字體:
來源:轉載
供稿:網友

本文為大家分享了微信小程序實現多選功能的具體代碼,供大家參考,具體內容如下

微信小程序,多選

代碼:

<!--hotblood_gongkao/pages/answer/answer.wxml--><!-- content --><view class='answer-list'>  <view class='answer-child'>    <text class='answer-title'><text style='margin-right:28rpx;'>{{num + 1}}/{{quesyion.length}}</text>{{question[num][0]}}</text>    <view class='answer-options'>      <view class="options {{selectIndex[0].sureid?'select':''}}" data-index='{{idx}}1' data-text='A' bindtap="{{whether?'':'selectAnswer'}}">        <image class="dui {{selectIndex[0].sureid?'dui2':''}}" src='../../images/icon-dui.png' />        <text><text style='margin-right:36rpx;'> A </text>{{question[num][1]}}</text>      </view>      <view class="options {{selectIndex[1].sureid?'select':''}}" data-index='{{idx}}2' data-text='B' bindtap="{{whether?'':'selectAnswer'}}">        <image class="dui {{selectIndex[1].sureid?'dui2':''}}" src='../../images/icon-dui.png' />        <text><text style='margin-right:36rpx;'> B </text>{{question[num][2]}}</text>      </view>      <view class="options {{selectIndex[2].sureid?'select':''}}" data-index='{{idx}}3' data-text='C' bindtap="{{whether?'':'selectAnswer'}}">        <image class="dui {{selectIndex[2].sureid?'dui2':''}}" src='../../images/icon-dui.png' />        <text><text style='margin-right:36rpx;'> C </text>{{question[num][3]}}</text>      </view>      <view class="options {{selectIndex[3].sureid?'select':''}}" data-index='{{idx}}4' data-text='D' bindtap="{{whether?'':'selectAnswer'}}">        <image class="dui {{selectIndex[3].sureid?'dui2':''}}" src='../../images/icon-dui.png' />        <text><text style='margin-right:36rpx;'> D </text>{{question[num][4]}}</text>      </view>    </view>  </view>  <view class="answer {{isWan?'isShow':'isHide'}}">    <text>正確答案{{question[num][3]}}</text>  </view>  <view class="subBtn {{isque?'isShow':'isHide'}}" bindtap='confirm'>    <text>確定</text>  </view>  <view class="subBtn {{isOne?'isHide':'isShow'}}" bindtap='next'>    <text>{{con}}</text>  </view>  <view class="subBtn {{iswancheng?'isShow':'isHide'}}" bindtap='submit'>    <text>提交答卷</text>  </view></view>

CSS: 

/* hotblood_gongkao/pages/answer/answer.wxss */ /* title */.titleImg{  width: 734rpx;  height: 45rpx;  position: fixed;  top: 0;  display: flex;  flex-direction: row;  align-items: center;  left: 50%;  background: #fbfbfb;  margin-left: -367rpx;  z-index: 10;}.titleImg image{  height: 35rpx;  width: 100%;}/* end */page{  height: 100%;  width: 100%;  background: #fbfbfb;}.isHide{  display: none;}.isShow{  display: block;}.title{  font-size: 34rpx;  color: #a6a6a6;  margin: 69rpx 0 0 0;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}.answer-list{ }.answer-child{  width: 672rpx;  margin: 0 auto;  background: #fff;  border-radius: 20rpx;  padding-top:34rpx;   margin-bottom: 20rpx;  margin-top: 72rpx;  box-sizing: border-box;  box-shadow: 0 0 4rpx #dcdcdc;}.answer-title{  font-size: 32rpx;  margin: 0 0 0 52rpx;}.answer-options{  display: flex;  flex-direction: column;  width: 642rpx;  margin: 32rpx auto 0 auto;}.options{  width: 100%;  height: 72rpx;  line-height: 72rpx;  font-size: 32rpx;  padding-left: 30rpx;  box-sizing: border-box;  margin-bottom: 4rpx;  position: relative;  border: 2rpx solid #fff; }.dui{  position: absolute;  height: 41rpx;  width: 59rpx;  top:50%;  margin-top: -20rpx;  right: 16rpx;  display: none;}.dui2{  display: block!important;}.select{  border: 2rpx solid #4ab07e;  box-sizing: border-box;  }.submit{  height: 120rpx;  width: 100%;  background: #4ab07e;  color: #fff;  font-size: 34rpx;  line-height: 120rpx;  text-align: center;  position: fixed;  left: 0;  bottom: 0;}/* 正確答案 */.answer{  width: 100%;  text-align: center;  color: #ff122f;  font-size: 34rpx;  font-weight: bold;  margin-top: 64rpx;} /* end *//* 下一題 */.subBtn{  width: 304rpx;  height: 86rpx;  background: #4ab07e;  color: #fff;  font-size: 34rpx;  text-align: center;  line-height: 86rpx;  border-radius: 20rpx;  margin: 190rpx auto 0 auto;}

js:

// hotblood_gongkao/pages/answer/answer.jsconst app = getApp();Page({   /**   * 頁面的初始數據   */  data: {    question: [      ["今天是個好日子", "halou word", "java", "javascript", 'c#'],      ["今天是個好日子", "halou word", "java", "javascript", 'c#'],    ], //題庫    index: 0, //選擇的索引    wrong: [], //錯誤    border: '',    num: 0,    con: '下一題',    isOne: true,    isWan: false,    iswancheng: false,    isque: false,    whether: false,    correct: [], //正確    duiList: 0, //答對的個數    cuoList: 0, //答錯的個數    selectIndex: [{        sureid: false      },      {        sureid: false      },      {        sureid: false      },      {        sureid: false      },    ],  },   /**   * 生命周期函數--監聽頁面加載   */  onLoad: function(options) {    this.setData({     })  },   /**   * 生命周期函數--監聽頁面初次渲染完成   */  onReady: function() {   },  // 提交答卷  submit: function(e) {    console.log(this.data.duiList);    console.log(this.data.cuoList);    var num = this.data.num; //當前題目下標    var question = this.data.question; //題庫    var duiList = this.data.duiList; //答對多少題    var cuoList = this.data.cuoList; //答錯多少題    //獲得題目對象的長度    var arr = Object.keys(question);    var len = arr.length;    if ((num + 1) == len) {      var grade = (100 / len) * duiList;      console.log(grade);      wx.redirectTo({        url: '../chengjiu/chengjiu?grade=' + grade,      })    }  },  // 確認選擇  confirm: function() {    var num = this.data.num;    var question = this.data.question; //題庫    //獲得題目對象的長度    var arr = Object.keys(question);    var len = arr.length;    if ((num + 1) == len) {      this.setData({        iswancheng: true,        isOne: true,        isWan: true,        isque: false      })    } else {      this.setData({        isOne: false,        whether: true,        isque: false,        isWan: true      })    }   },  // 下一題  next: function() {    var num = this.data.num; //當前題目下標    this.setData({      num: num + 1,      isOne: true,      isWan: false,      whether: false,      index: 0    })  },  // 選擇答案  selectAnswer: function(e) {    console.log(e);    var index1 = e.currentTarget.dataset.index - 1; //當前點擊元素的自定義數據,這個很關鍵    var selectIndex = this.data.selectIndex; //取到data里的selectIndex    selectIndex[index1].sureid = !selectIndex[index1].sureid; //點擊就賦相反的值    console.log(selectIndex[index1])    this.setData({      selectIndex: selectIndex //將已改變屬性的json數組更新    })    console.log(this.data.selectIndex.in_array(true))    if (selectIndex.in_array(true) == false) {      this.setData({        isque: false      })    } else {      var question = this.data.question; //題庫      var num = this.data.num; //當前題目下標      var text = e.currentTarget.dataset.text; //選擇的答案      var duiList = this.data.duiList; //答對多少題      var cuoList = this.data.cuoList; //答錯多少題       //獲得題目對象的長度      var arr = Object.keys(question);      var len = arr.length;      //當前答題為最后一題      if ((num + 1) == len) {        //判斷選擇的答案和正確答案是否一致        if (text == question[num][3]) {          duiList = duiList + 1;          this.setData({            duiList: duiList,            isque: true          })        } else {          cuoList = cuoList + 1;          this.setData({            cuoList: cuoList,            isque: true          })        }      } else {        //判斷選擇的答案和正確答案是否一致        if (text == question[num][3]) {          duiList = duiList + 1;          this.setData({            duiList: duiList,            isque: true          })        } else {          cuoList = cuoList + 1;          this.setData({            cuoList: cuoList,            isque: true          })        }      }    }    },  /**   * 生命周期函數--監聽頁面顯示   */  onShow: function() {    this.question();  },    /**   * 生命周期函數--監聽頁面隱藏   */  onHide: function() {   },   /**   * 生命周期函數--監聽頁面卸載   */  onUnload: function() {   },   /**   * 頁面相關事件處理函數--監聽用戶下拉動作   */  onPullDownRefresh: function() {   },   /**   * 頁面上拉觸底事件的處理函數   */  onReachBottom: function() {   },   /**   * 用戶點擊右上角分享   */  onShareAppMessage: function() {   }})Array.prototype.in_array = function(element) {  for (var i = 0; i < this.length; i++) {    if (this[i].sureid == element) {      return true;    }  }  return false;}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 免费播放欧美毛片 | 中文有码一区二区 | 久久久在线免费观看 | 免费色片 | 免费黄色小视频网站 | 精品一区二区三区在线观看国产 | 日日鲁夜夜视频热线播放 | 一级黄片毛片免费看 | 成年人网站国产 | 91麻豆蜜桃一区二区三区 | 一区二区三区黄色 | 日韩专区在线 | 欧美aaaaaaaa| 99精品国产一区二区三区 | 成人啪啪18免费网站 | va视频| 欧美一区二区三区中文字幕 | 黄色一级电影网 | 亚洲一级成人 | 手机免费看一级片 | 成人午夜高清 | 成年免费在线视频 | 久久久久久久爱 | 欧美一级成人一区二区三区 | 黄色免费av网站 | 久久精国 | 欧美一级毛片美99毛片 | 欧美第1页 | 欧美特黄一级高清免费的香蕉 | 中文字幕在线观看1 | 久久激情国产 | 中国大陆一级毛片 | 在线成人av观看 | 精品黑人一区二区三区国语馆 | 国产欧美亚洲精品a | 国产日韩在线 | 成人黄色小视频在线观看 | 综合毛片| 91精品国产91久久久久久蜜臀 | 亚洲四播房 | a级毛片免费观看在线播放 日本aaa一级片 |