欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)多選功能

 更新時間:2018年11月04日 10:51:32   作者:進階的碼農(nóng)  
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)多選功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文為大家分享了微信小程序?qū)崿F(xiàn)多選功能的具體代碼,供大家參考,具體內(nèi)容如下

代碼:

<!--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.js
const app = getApp();
Page({
 
  /**
   * 頁面的初始數(shù)據(jù)
   */
  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, //答對的個數(shù)
    cuoList: 0, //答錯的個數(shù)
    selectIndex: [{
        sureid: false
      },
      {
        sureid: false
      },
      {
        sureid: false
      },
      {
        sureid: false
      },
    ],
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {
    this.setData({
 
    })
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  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; //當前點擊元素的自定義數(shù)據(jù),這個很關(guān)鍵
    var selectIndex = this.data.selectIndex; //取到data里的selectIndex
    selectIndex[index1].sureid = !selectIndex[index1].sureid; //點擊就賦相反的值
    console.log(selectIndex[index1])
    this.setData({
      selectIndex: selectIndex //將已改變屬性的json數(shù)組更新
    })
    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
          })
        }
      }
    }
 
 
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function() {
    this.question();
  },
  
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function() {
 
  },
 
  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function() {
 
  },
 
  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  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;
}

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • d3.js實現(xiàn)圖形拖拽

    d3.js實現(xiàn)圖形拖拽

    這篇文章主要為大家詳細介紹了d3.js實現(xiàn)圖形拖拽,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • 微信小程序使用canvas繪制鐘表

    微信小程序使用canvas繪制鐘表

    這篇文章主要為大家詳細介紹了微信小程序使用canvas繪制鐘表,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • JavaScript DOM常用操作代碼匯總

    JavaScript DOM常用操作代碼匯總

    這篇文章主要介紹了JavaScript DOM常用操作代碼匯總,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-07-07
  • 5分鐘打造簡易高效的webpack常用配置

    5分鐘打造簡易高效的webpack常用配置

    這篇文章主要介紹了5分鐘打造簡易高效的webpack配置,詳細的介紹了打包調(diào)試、提取公共代碼、壓縮、熱替換等配置,有興趣的可以了解一下
    2017-07-07
  • JavaScript中數(shù)組slice和splice的對比小結(jié)

    JavaScript中數(shù)組slice和splice的對比小結(jié)

    相信對很多學習JavaScript語言的人來說,都會經(jīng)常搞不清slice和splice這兩個方法。它們雖然名稱相似,但是功能卻完全不同。所以這篇文章就給大家詳細整理了關(guān)于JavaScript中數(shù)組slice和splice的對比,有需要的可以參考學習。
    2016-09-09
  • 微信WeixinJSBridge API使用實例

    微信WeixinJSBridge API使用實例

    這篇文章主要介紹了微信WeixinJSBridge API使用實例,本文直接給出HTML代碼,代碼中包含了很多實用功能,如圖片預覽、分享到微博、隱藏右上角按鈕、獲取網(wǎng)絡狀態(tài)、發(fā)起公眾號微信支付等內(nèi)容,需要的朋友可以參考下
    2015-05-05
  • JavaScript實現(xiàn)放大鏡效果代碼示例

    JavaScript實現(xiàn)放大鏡效果代碼示例

    這篇文章主要介紹了JavaScript實現(xiàn)放大鏡效果代碼示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-04-04
  • javascript實現(xiàn)將數(shù)字轉(zhuǎn)成千分位的方法小結(jié)【5種方式】

    javascript實現(xiàn)將數(shù)字轉(zhuǎn)成千分位的方法小結(jié)【5種方式】

    這篇文章主要介紹了javascript實現(xiàn)將數(shù)字轉(zhuǎn)成千分位的方法,結(jié)合實例形式分析了5種常用的數(shù)字轉(zhuǎn)換的常用方法,涉及字符串與正則操作的相關(guān)技巧,需要的朋友可以參考下
    2016-12-12
  • 子頁向父頁傳值示例

    子頁向父頁傳值示例

    在某些情況下需要子頁向父頁傳值,本文有個不錯的示例,不會的朋友可以參考下
    2013-11-11
  • 淺析原生JavaScript中拖拽屬性draggable的使用

    淺析原生JavaScript中拖拽屬性draggable的使用

    這篇文章主要為大家詳細介紹了原生JavaScript中拖拽屬性draggable使用的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2024-03-03

最新評論