本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下

代码:

{{num + 1}}/{{quesyion.length}}{{question[num][0]}}

A {{question[num][1]}}

B {{question[num][2]}}

C {{question[num][3]}}

D {{question[num][4]}}

正确答案{{question[num][3]}}

确定

{{con}}

提交答卷

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;

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

php 微信小程序 循环 多选,微信小程序实现多选功能相关推荐

  1. php 微信小程序 循环 多选,微信小程序 循环及嵌套循环的使用

    这篇文章主要介绍了微信小程序 循环及嵌套循环的使用总结的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下 微信小程序 循环及嵌套循环的使用总结 关于微信小程序,最近被安排做微信小程序,首次接触 ...

  2. 微信小程序循环 wxfor、wxfor-item(s)区别与联系、data-xxx、wx-key使用

    微信小程序循环 wx:for.wx:for-item(s)区别与联系.data-xxx .wx-key使用 wx:for.wx:for-items.wx:for-item的区别和联系 小程序的列表视图 ...

  3. 微信小程序foreach遍历_详解微信小程序循环及嵌套循环

    本文主要介绍微信小程序 循环及嵌套循环的使用总结的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下,希望能帮助到大家. 对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中 ...

  4. 微信小程序循环出来的内容设置不同的样式

    微信小程序循环出来的内容设置不同的样式 循环出来的内容可以通过判断下标的方式添加想要的class样式或者style,例如: 设置类名 class="img {{index===1?'chan ...

  5. 小程序 a标签_微信内循环生态:朋友圈标签引流视频号、小程序、搜一搜

    2019 年 1 月,张小龙在广州的微信公开课 Pro 上进行了一场 4 小时的超时演讲,在演讲中,他举了一个和朋友圈相关的例子,每个人每天在朋友圈里花的时长基本是固定的,随着好友发的内容越来越多,用 ...

  6. 微信小程序实现单选、全选、反选、取消全选功能

    实现效果 源代码 <!-- 循环单选 --><viewclass="parkNotice-email"v-for="(item2, index2) in ...

  7. php 小程序 运动步数_微信小程序步数运动-收益讲解

    不得不佩服,步数小程序的厉害之处. 把闲散的运动步数,转化成一种可量化的社交货币,流动保存起来,探索出一种门槛低,又健康的经济模式. 对用户,真金白银的刺激,免费步数换取/抵现商品,红包,充值卡等. ...

  8. 600多个微信小程序源码_微信小程序在线音乐播放器及源码下载

    引言 自己刚开始学微信小程序的时候,自己做着玩玩的. 现在分享出来给大家学习用用,如果觉得有借鉴意义,我的目的就算达到了. 成果 效果图 废话不多说,直接上效果图: 这里 本来是GIF的图,但是太大了 ...

  9. uniapp同步获取用户信息_微信小程序云开发教程微信小程序的API入门获取用户身份信息系列API...

    同学们大家好,我是小伊同学,上一节我们介绍了一些常用API,今天我们接着来学习一组API,那就是获取用户身份信息的API. 在微信小程序中,我们往往需要获取用户的身份信息,比如昵称.头像.性别.地区等 ...

  10. java写微信小程序答辩问题_微信小程序毕业设计选题和毕业论文怎么写,答辩流程是怎样的?...

    1. 开始准备选题 大四上学期开学时开始准备论文的,首先是确定论文主题,看自己想做什么毕业设计,可以选取之前接触过的,做过的东西,这样快一些,如果选的是没接触过的方向,一定要早点开始.打算做一个小程序 ...

最新文章

  1. eclipse 中断言使用的设定
  2. Java NIO与IO的区别和比较
  3. 《浪潮之巅》读书笔记汇总
  4. Caffe部署中的几个train-test-solver-prototxt-deploy等说明二
  5. 盘点 Serverless 架构的六个特质
  6. 【python毕业设计】Django框架实现学生信息管理系统
  7. Redis 持久化——AOF
  8. 我们如何在Linkerd 2.2里设计重试
  9. Mybatis plus 整合springboot 出现的Invalid bound statement (not found)问题
  10. HDU1287 破译密码【密码】
  11. iOS开发之Xcode开发快捷键大全
  12. 【安全牛学习笔记】SSL、TLS拒绝服务***和补充概念
  13. 一夜上手uni-app
  14. 当下最实用计算机编程语言,目前最流行的计算机编程语言是什么?
  15. android 修复工具,牛学长安卓手机修复工具(Reiboot for Android)
  16. 整人的bat文件代码
  17. linux---任务分配(PBS)
  18. 如何实现 ASP.NET Core WebApi 的版本化
  19. 七夕节表白3d相册制作
  20. 计算机专业期刊参考文献,优秀计算机期刊文章参考文献 优秀计算机专著类参考文献有哪些-免费论文范文...

热门文章

  1. 【渝粤题库】陕西师范大学400006 公共关系学 作业(专升本)
  2. [渝粤教育] 中国地质大学 材料力学 复习题 (2)
  3. 【渝粤题库】广东开放大学 外贸会计 形成性考核
  4. 【渝粤题库】国家开放大学2021春3620矿井火灾防治题目
  5. ssm如何支持热部署_Java 调式、热部署、JVM 背后的支持者 Java Agent
  6. linux设置默认的首页文件,Linux 设置Firefox主页
  7. python __call__一般用在哪些地方_Python __call__内置函数的作用和用法
  8. 高斯白噪声下基于EM的多径时延估计
  9. java随机数函数_java随机函数详解
  10. python 在末尾增加一个字符串,python - Python File.write在末尾添加额外的字符串 - SO中文参考 - www.soinside.com...