微信小程序?qū)崿F(xiàn)多選功能
更新時(shí)間：2018年11月04日 10:51:32 作者：進(jìn)階的碼農(nóng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文為大家分享了微信小程序?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: [
["今天是個(gè)好日子", "halou word", "java", "javascript", 'c#'],
["今天是個(gè)好日子", "halou word", "java", "javascript", 'c#'],
], //題庫
index: 0, //選擇的索引
wrong: [], //錯(cuò)誤
border: '',
num: 0,
con: '下一題',
isOne: true,
isWan: false,
iswancheng: false,
isque: false,
whether: false,
correct: [], //正確
duiList: 0, //答對(duì)的個(gè)數(shù)
cuoList: 0, //答錯(cuò)的個(gè)數(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; //當(dāng)前題目下標(biāo)
var question = this.data.question; //題庫
var duiList = this.data.duiList; //答對(duì)多少題
var cuoList = this.data.cuoList; //答錯(cuò)多少題
//獲得題目對(duì)象的長度
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,
})
}
},
// 確認(rèn)選擇
confirm: function() {
var num = this.data.num;
var question = this.data.question; //題庫
//獲得題目對(duì)象的長度
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; //當(dāng)前題目下標(biāo)
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; //當(dāng)前點(diǎn)擊元素的自定義數(shù)據(jù)，這個(gè)很關(guān)鍵
var selectIndex = this.data.selectIndex; //取到data里的selectIndex
selectIndex[index1].sureid = !selectIndex[index1].sureid; //點(diǎn)擊就賦相反的值
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; //當(dāng)前題目下標(biāo)
var text = e.currentTarget.dataset.text; //選擇的答案
var duiList = this.data.duiList; //答對(duì)多少題
var cuoList = this.data.cuoList; //答錯(cuò)多少題
//獲得題目對(duì)象的長度
var arr = Object.keys(question);
var len = arr.length;
//當(dāng)前答題為最后一題
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)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function() {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function() {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序?qū)崿F(xiàn)多選框全選操作
- 微信小程序?qū)崿F(xiàn)多選框功能的實(shí)例代碼
- 微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過程解析
- 微信小程序全選多選效果實(shí)現(xiàn)代碼解析
- 微信小程序?qū)崿F(xiàn)多選框全選與反全選及購物車中刪除選中的商品功能
- 微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能示例
- 微信小程序單選radio及多選checkbox按鈕用法示例
- 微信小程序?qū)崿F(xiàn)多選刪除列表數(shù)據(jù)功能示例
- 微信小程序自定義多選事件的實(shí)現(xiàn)代碼
- 微信小程序自定義組件實(shí)現(xiàn)多選功能
相關(guān)文章
js判斷滾動(dòng)條是否已到頁面最底部或頂部實(shí)例
這篇文章主要介紹了js判斷滾動(dòng)條是否已到頁面最底部或頂部的原理與方法,以實(shí)例的形式詳細(xì)分析了js實(shí)現(xiàn)返回頂部功能所涉及的各種技巧,并對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行了總結(jié)歸納,需要的朋友可以參考下2014-11-11
js斷點(diǎn)調(diào)試經(jīng)驗(yàn)分享
給大家詳細(xì)分析了一下JS斷電調(diào)試的心得和經(jīng)驗(yàn)，有需要的朋友參考一下吧。2017-12-12
淺析JavaScriptSerializer類的序列化與反序列化
本篇文章主要介紹了JavaScriptSerializer類 對(duì)象序列化與反序列化的方法、屬性以及實(shí)例代碼，有需要的朋友可以參考一下2016-11-11
js jquery ajax的幾種用法總結(jié)(及優(yōu)缺點(diǎn)介紹)
本篇文章只要介紹了js jquery ajax的幾種用法總結(jié)(及優(yōu)缺點(diǎn)介紹)，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
javascript異步編程代碼書寫規(guī)范Promise學(xué)習(xí)筆記
這篇文章主要介紹了javascript異步編程代碼書寫規(guī)范Promise學(xué)習(xí)筆記,需要的朋友可以參考下2015-02-02
本文主要介紹了JS變量及其作用域的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
客戶端限制只能上傳jpg格式圖片的js代碼,對(duì)用戶體驗(yàn)較好，適合網(wǎng)頁中只能使用jpg格式圖片的情況。2010-12-12
JS實(shí)現(xiàn)排行榜文字向上滾動(dòng)輪播效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)排行榜文字向上滾動(dòng)輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記
這篇文章主要介紹了Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家介紹了uniapp movable-area應(yīng)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08