当前位置：移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现多选功能

微信小程序实现多选功能

2018年11月26日 | 移动技术网IT编程 | 我要评论

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

代码：

<!--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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

TCP和UDP的优缺点及区别

TCP的优点：可靠，稳定 TCP的可靠体现在TCP在传递数据之前，会有三次握手来建立连接，而且在数据传递时，有... [阅读全文]
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例

以vs2012为标准。转自：http://technet.microsoft.com/zh-cn/library... [阅读全文]
CTF 刷题记录（一）白云新闻搜索（手动与自动化SQL注入）

题目给出的靶机如下：解题思路首先判断这是考察哪个知识点，只有一个输入框，题目中又说到入侵，首先考虑sql注入，下... [阅读全文]
Node.js 深度调试方法解析

在 node.js 项目开发过程中，随着项目的发展，调用关系越来越复杂，调试工具的重要性日益凸显。node(v6.3+)集成了方便好用 v8 inspect 调... [阅读全文]
javascript如何使用函数random来实现课堂随机点名方法详解

如何使用函数random来实现课堂随机点名1.最初的样子如下2.点击开始点名，上面一行的文字变成名字，名字在不停的变化，开始点名变成停止点名，如下3.点击停止点... [阅读全文]
从0到1学习JavaScript编写贪吃蛇游戏

本文实例为大家分享了javascript编写贪吃蛇游戏的具体代码，供大家参考，具体内容如下游戏截图1.画出游戏界面var c=document.geteleme... [阅读全文]
js编写简易的计算器

本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下使用绑定时间触发加减乘除加：减：乘：除：源代码：<body> 第一个数... [阅读全文]
甜品消消乐 03甜品的生成与基础脚本的编写

（1）甜品数组// 甜品数组，使用二维存放生成的甜品，用于后续操作private GameSweet[,] sw... [阅读全文]
Unity Editor中打开场景获取GameObject

编辑器工具开发中，有时需要找到场景中的物体。下面介绍用代码在Editor中寻找指定场景中的GameObject如... [阅读全文]
使用Scratch制作打弹球游戏（三）过关增加难度

过关增加难度个博客我们对弹珠如何进行过关进行了讲解，我们今天呢，就来讲解以下如何增加关卡难度。大家可以想一下关卡... [阅读全文]

网友评论


验证码：

微信小程序实现多选功能

2018年11月26日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论