php 微信小程序 循环 多选,微信小程序实现多选功能
本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下
代码:
{{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 微信小程序 循环 多选,微信小程序实现多选功能相关推荐
- php 微信小程序 循环 多选,微信小程序 循环及嵌套循环的使用
这篇文章主要介绍了微信小程序 循环及嵌套循环的使用总结的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下 微信小程序 循环及嵌套循环的使用总结 关于微信小程序,最近被安排做微信小程序,首次接触 ...
- 微信小程序循环 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的区别和联系 小程序的列表视图 ...
- 微信小程序foreach遍历_详解微信小程序循环及嵌套循环
本文主要介绍微信小程序 循环及嵌套循环的使用总结的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下,希望能帮助到大家. 对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中 ...
- 微信小程序循环出来的内容设置不同的样式
微信小程序循环出来的内容设置不同的样式 循环出来的内容可以通过判断下标的方式添加想要的class样式或者style,例如: 设置类名 class="img {{index===1?'chan ...
- 小程序 a标签_微信内循环生态:朋友圈标签引流视频号、小程序、搜一搜
2019 年 1 月,张小龙在广州的微信公开课 Pro 上进行了一场 4 小时的超时演讲,在演讲中,他举了一个和朋友圈相关的例子,每个人每天在朋友圈里花的时长基本是固定的,随着好友发的内容越来越多,用 ...
- 微信小程序实现单选、全选、反选、取消全选功能
实现效果 源代码 <!-- 循环单选 --><viewclass="parkNotice-email"v-for="(item2, index2) in ...
- php 小程序 运动步数_微信小程序步数运动-收益讲解
不得不佩服,步数小程序的厉害之处. 把闲散的运动步数,转化成一种可量化的社交货币,流动保存起来,探索出一种门槛低,又健康的经济模式. 对用户,真金白银的刺激,免费步数换取/抵现商品,红包,充值卡等. ...
- 600多个微信小程序源码_微信小程序在线音乐播放器及源码下载
引言 自己刚开始学微信小程序的时候,自己做着玩玩的. 现在分享出来给大家学习用用,如果觉得有借鉴意义,我的目的就算达到了. 成果 效果图 废话不多说,直接上效果图: 这里 本来是GIF的图,但是太大了 ...
- uniapp同步获取用户信息_微信小程序云开发教程微信小程序的API入门获取用户身份信息系列API...
同学们大家好,我是小伊同学,上一节我们介绍了一些常用API,今天我们接着来学习一组API,那就是获取用户身份信息的API. 在微信小程序中,我们往往需要获取用户的身份信息,比如昵称.头像.性别.地区等 ...
- java写微信小程序答辩问题_微信小程序毕业设计选题和毕业论文怎么写,答辩流程是怎样的?...
1. 开始准备选题 大四上学期开学时开始准备论文的,首先是确定论文主题,看自己想做什么毕业设计,可以选取之前接触过的,做过的东西,这样快一些,如果选的是没接触过的方向,一定要早点开始.打算做一个小程序 ...
最新文章
- eclipse 中断言使用的设定
- Java NIO与IO的区别和比较
- 《浪潮之巅》读书笔记汇总
- Caffe部署中的几个train-test-solver-prototxt-deploy等说明二
- 盘点 Serverless 架构的六个特质
- 【python毕业设计】Django框架实现学生信息管理系统
- Redis 持久化——AOF
- 我们如何在Linkerd 2.2里设计重试
- Mybatis plus 整合springboot 出现的Invalid bound statement (not found)问题
- HDU1287 破译密码【密码】
- iOS开发之Xcode开发快捷键大全
- 【安全牛学习笔记】SSL、TLS拒绝服务***和补充概念
- 一夜上手uni-app
- 当下最实用计算机编程语言,目前最流行的计算机编程语言是什么?
- android 修复工具,牛学长安卓手机修复工具(Reiboot for Android)
- 整人的bat文件代码
- linux---任务分配(PBS)
- 如何实现 ASP.NET Core WebApi 的版本化
- 七夕节表白3d相册制作
- 计算机专业期刊参考文献,优秀计算机期刊文章参考文献 优秀计算机专著类参考文献有哪些-免费论文范文...
热门文章
- 【渝粤题库】陕西师范大学400006 公共关系学 作业(专升本)
- [渝粤教育] 中国地质大学 材料力学 复习题 (2)
- 【渝粤题库】广东开放大学 外贸会计 形成性考核
- 【渝粤题库】国家开放大学2021春3620矿井火灾防治题目
- ssm如何支持热部署_Java 调式、热部署、JVM 背后的支持者 Java Agent
- linux设置默认的首页文件,Linux 设置Firefox主页
- python __call__一般用在哪些地方_Python __call__内置函数的作用和用法
- 高斯白噪声下基于EM的多径时延估计
- java随机数函数_java随机函数详解
- python 在末尾增加一个字符串,python - Python File.write在末尾添加额外的字符串 - SO中文参考 - www.soinside.com...