微信小程序實現多選功能

發布時間：2020-09-17 10:27:15 來源：腳本之家閱讀：214 作者：進階的碼農欄目：web開發

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

微信小程序實現多選功能

代碼：

<!--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({
 
  /**
   * 頁面的初始數據
   */
  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;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

微信小程序實現多選功能

猜你喜歡

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

微信小程序實現多選功能

猜你喜歡

最新資訊

相關推薦

相關標簽