找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序实现多选功能,复选框

[复制链接]
查看: 74|回复: 0
最佳答案
0 

3

主题

3

帖子

90

积分

新人求带

积分
90
 楼主| 发表于 2018-9-14 14:29:56 | 显示全部楼层 |阅读模式
微信小程序中如何实现多选功能、复选框呢?本篇教程通过实例代码直接教你
2018091314502798.gif
  1. <!--hotblood_gongkao/pages/answer/answer.wxml-->
  2. <!-- content -->
  3. <view class='answer-list'>
  4.     <view class='answer-child'>
  5.         <text class='answer-title'><text style='margin-right:28rpx;'>{{num + 1}}/{{quesyion.length}}</text>{{question[num][0]}}</text>
  6.         <view class='answer-options'>
  7.             <view class="options {{selectIndex[0].sureid?'select':''}}" data-index='{{idx}}1' data-text='A' bindtap="{{whether?'':'selectAnswer'}}">
  8.                 <image class="dui {{selectIndex[0].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
  9.                 <text><text style='margin-right:36rpx;'> A </text>{{question[num][1]}}</text>
  10.             </view>
  11.             <view class="options {{selectIndex[1].sureid?'select':''}}" data-index='{{idx}}2' data-text='B' bindtap="{{whether?'':'selectAnswer'}}">
  12.                 <image class="dui {{selectIndex[1].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
  13.                 <text><text style='margin-right:36rpx;'> B </text>{{question[num][2]}}</text>
  14.             </view>
  15.             <view class="options {{selectIndex[2].sureid?'select':''}}" data-index='{{idx}}3' data-text='C' bindtap="{{whether?'':'selectAnswer'}}">
  16.                 <image class="dui {{selectIndex[2].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
  17.                 <text><text style='margin-right:36rpx;'> C </text>{{question[num][3]}}</text>
  18.             </view>
  19.             <view class="options {{selectIndex[3].sureid?'select':''}}" data-index='{{idx}}4' data-text='D' bindtap="{{whether?'':'selectAnswer'}}">
  20.                 <image class="dui {{selectIndex[3].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
  21.                 <text><text style='margin-right:36rpx;'> D </text>{{question[num][4]}}</text>
  22.             </view>
  23.         </view>
  24.     </view>
  25.     <view class="answer {{isWan?'isShow':'isHide'}}">
  26.         <text>正确答案{{question[num][3]}}</text>
  27.     </view>
  28.     <view class="subBtn {{isque?'isShow':'isHide'}}" bindtap='confirm'>
  29.         <text>确定</text>
  30.     </view>
  31.     <view class="subBtn {{isOne?'isHide':'isShow'}}" bindtap='next'>
  32.         <text>{{con}}</text>
  33.     </view>
  34.     <view class="subBtn {{iswancheng?'isShow':'isHide'}}" bindtap='submit'>
  35.         <text>提交答卷</text>
  36.     </view>
  37. </view>
复制代码
  1. /* hotblood_gongkao/pages/answer/answer.wxss */

  2. /* title */
  3. .titleImg{
  4.     width: 734rpx;
  5.     height: 45rpx;
  6.     position: fixed;
  7.     top: 0;
  8.     display: flex;
  9.     flex-direction: row;
  10.     align-items: center;
  11.     left: 50%;
  12.     background: #fbfbfb;
  13.     margin-left: -367rpx;
  14.     z-index: 10;
  15. }
  16. .titleImg image{
  17.     height: 35rpx;
  18.     width: 100%;
  19. }
  20. /* end */
  21. page{
  22.     height: 100%;
  23.     width: 100%;
  24.     background: #fbfbfb;
  25. }
  26. .isHide{
  27.     display: none;
  28. }
  29. .isShow{
  30.     display: block;
  31. }
  32. .title{
  33.     font-size: 34rpx;
  34.     color: #a6a6a6;
  35.     margin: 69rpx 0 0 0;
  36.     display: flex;
  37.     flex-direction: column;
  38.     justify-content: center;
  39.     align-items: center;
  40. }
  41. .answer-list{

  42. }
  43. .answer-child{
  44.     width: 672rpx;
  45.     margin: 0 auto;
  46.     background: #fff;
  47.     border-radius: 20rpx;
  48.     padding-top:34rpx;
  49.     margin-bottom: 20rpx;
  50.     margin-top: 72rpx;
  51.     box-sizing: border-box;
  52.     box-shadow: 0 0 4rpx #dcdcdc;
  53. }
  54. .answer-title{
  55.     font-size: 32rpx;
  56.     margin: 0 0 0 52rpx;
  57. }
  58. .answer-options{
  59.     display: flex;
  60.     flex-direction: column;
  61.     width: 642rpx;
  62.     margin: 32rpx auto 0 auto;
  63. }
  64. .options{
  65.     width: 100%;
  66.     height: 72rpx;
  67.     line-height: 72rpx;
  68.     font-size: 32rpx;
  69.     padding-left: 30rpx;
  70.     box-sizing: border-box;
  71.     margin-bottom: 4rpx;
  72.     position: relative;
  73.     border: 2rpx solid #fff;

  74. }
  75. .dui{
  76.     position: absolute;
  77.     height: 41rpx;
  78.     width: 59rpx;
  79.     top:50%;
  80.     margin-top: -20rpx;
  81.     right: 16rpx;
  82.     display: none;
  83. }
  84. .dui2{
  85.     display: block!important;
  86. }
  87. .select{
  88.     border: 2rpx solid #4ab07e;
  89.     box-sizing: border-box;
  90.    
  91. }
  92. .submit{
  93.     height: 120rpx;
  94.     width: 100%;
  95.     background: #4ab07e;
  96.     color: #fff;
  97.     font-size: 34rpx;
  98.     line-height: 120rpx;
  99.     text-align: center;
  100.     position: fixed;
  101.     left: 0;
  102.     bottom: 0;
  103. }
  104. /* 正确答案 */
  105. .answer{
  106.     width: 100%;
  107.     text-align: center;
  108.     color: #ff122f;
  109.     font-size: 34rpx;
  110.     font-weight: bold;
  111.     margin-top: 64rpx;
  112. }

  113. /* end */
  114. /* 下一题 */
  115. .subBtn{
  116.     width: 304rpx;
  117.     height: 86rpx;
  118.     background: #4ab07e;
  119.     color: #fff;
  120.     font-size: 34rpx;
  121.     text-align: center;
  122.     line-height: 86rpx;
  123.     border-radius: 20rpx;
  124.     margin: 190rpx auto 0 auto;
  125. }
复制代码
  1. // hotblood_gongkao/pages/answer/answer.js
  2. const app = getApp();
  3. Page({

  4.     /**
  5.      * 页面的初始数据
  6.      */
  7.     data: {
  8.         question: [
  9.             ["今天是个好日子", "halou word", "java", "javascript", 'c#'],
  10.             ["今天是个好日子", "halou word", "java", "javascript", 'c#'],
  11.         ], //题库
  12.         index: 0, //选择的索引
  13.         wrong: [], //错误
  14.         border: '',
  15.         num: 0,
  16.         con: '下一题',
  17.         isOne: true,
  18.         isWan: false,
  19.         iswancheng: false,
  20.         isque: false,
  21.         whether: false,
  22.         correct: [], //正确
  23.         duiList: 0, //答对的个数
  24.         cuoList: 0, //答错的个数
  25.         selectIndex: [{
  26.                 sureid: false
  27.             },
  28.             {
  29.                 sureid: false
  30.             },
  31.             {
  32.                 sureid: false
  33.             },
  34.             {
  35.                 sureid: false
  36.             },
  37.         ],
  38.     },

  39.     /**
  40.      * 生命周期函数--监听页面加载
  41.      */
  42.     onLoad: function(options) {
  43.         this.setData({

  44.         })
  45.     },

  46.     /**
  47.      * 生命周期函数--监听页面初次渲染完成
  48.      */
  49.     onReady: function() {

  50.     },
  51.     // 提交答卷
  52.     submit: function(e) {
  53.         console.log(this.data.duiList);
  54.         console.log(this.data.cuoList);
  55.         var num = this.data.num; //当前题目下标
  56.         var question = this.data.question; //题库
  57.         var duiList = this.data.duiList; //答对多少题
  58.         var cuoList = this.data.cuoList; //答错多少题
  59.         //获得题目对象的长度
  60.         var arr = Object.keys(question);
  61.         var len = arr.length;
  62.         if ((num + 1) == len) {
  63.             var grade = (100 / len) * duiList;
  64.             console.log(grade);
  65.             wx.redirectTo({
  66.                 url: '../chengjiu/chengjiu?grade=' + grade,
  67.             })
  68.         }
  69.     },
  70.     // 确认选择
  71.     confirm: function() {
  72.         var num = this.data.num;
  73.         var question = this.data.question; //题库
  74.         //获得题目对象的长度
  75.         var arr = Object.keys(question);
  76.         var len = arr.length;
  77.         if ((num + 1) == len) {
  78.             this.setData({
  79.                 iswancheng: true,
  80.                 isOne: true,
  81.                 isWan: true,
  82.                 isque: false
  83.             })
  84.         } else {
  85.             this.setData({
  86.                 isOne: false,
  87.                 whether: true,
  88.                 isque: false,
  89.                 isWan: true
  90.             })
  91.         }

  92.     },
  93.     // 下一题
  94.     next: function() {
  95.         var num = this.data.num; //当前题目下标
  96.         this.setData({
  97.             num: num + 1,
  98.             isOne: true,
  99.             isWan: false,
  100.             whether: false,
  101.             index: 0
  102.         })
  103.     },
  104.     // 选择答案
  105.     selectAnswer: function(e) {
  106.         console.log(e);
  107.         var index1 = e.currentTarget.dataset.index - 1; //当前点击元素的自定义数据,这个很关键
  108.         var selectIndex = this.data.selectIndex; //取到data里的selectIndex
  109.         selectIndex[index1].sureid = !selectIndex[index1].sureid; //点击就赋相反的值
  110.         console.log(selectIndex[index1])
  111.         this.setData({
  112.             selectIndex: selectIndex //将已改变属性的json数组更新
  113.         })
  114.         console.log(this.data.selectIndex.in_array(true))
  115.         if (selectIndex.in_array(true) == false) {
  116.             this.setData({
  117.                 isque: false
  118.             })
  119.         } else {
  120.             var question = this.data.question; //题库
  121.             var num = this.data.num; //当前题目下标
  122.             var text = e.currentTarget.dataset.text; //选择的答案
  123.             var duiList = this.data.duiList; //答对多少题
  124.             var cuoList = this.data.cuoList; //答错多少题

  125.             //获得题目对象的长度
  126.             var arr = Object.keys(question);
  127.             var len = arr.length;
  128.             //当前答题为最后一题
  129.             if ((num + 1) == len) {
  130.                 //判断选择的答案和正确答案是否一致
  131.                 if (text == question[num][3]) {
  132.                     duiList = duiList + 1;
  133.                     this.setData({
  134.                         duiList: duiList,
  135.                         isque: true
  136.                     })
  137.                 } else {
  138.                     cuoList = cuoList + 1;
  139.                     this.setData({
  140.                         cuoList: cuoList,
  141.                         isque: true
  142.                     })
  143.                 }
  144.             } else {
  145.                 //判断选择的答案和正确答案是否一致
  146.                 if (text == question[num][3]) {
  147.                     duiList = duiList + 1;
  148.                     this.setData({
  149.                         duiList: duiList,
  150.                         isque: true
  151.                     })
  152.                 } else {
  153.                     cuoList = cuoList + 1;
  154.                     this.setData({
  155.                         cuoList: cuoList,
  156.                         isque: true
  157.                     })
  158.                 }
  159.             }
  160.         }


  161.     },
  162.     /**
  163.      * 生命周期函数--监听页面显示
  164.      */
  165.     onShow: function() {
  166.         this.question();
  167.     },
  168.    
  169.     /**
  170.      * 生命周期函数--监听页面隐藏
  171.      */
  172.     onHide: function() {

  173.     },

  174.     /**
  175.      * 生命周期函数--监听页面卸载
  176.      */
  177.     onUnload: function() {

  178.     },

  179.     /**
  180.      * 页面相关事件处理函数--监听用户下拉动作
  181.      */
  182.     onPullDownRefresh: function() {

  183.     },

  184.     /**
  185.      * 页面上拉触底事件的处理函数
  186.      */
  187.     onReachBottom: function() {

  188.     },

  189.     /**
  190.      * 用户点击右上角分享
  191.      */
  192.     onShareAppMessage: function() {

  193.     }
  194. })
  195. Array.prototype.in_array = function(element) {
  196.     for (var i = 0; i < this.length; i++) {
  197.         if (this[i].sureid == element) {
  198.             return true;
  199.         }
  200.     }
  201.     return false;
  202. }
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com