首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

微信小程序实现多选功能

Posted in Javascript onNovember 04, 2018

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

微信小程序实现多选功能

代码：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

微信小程序实现多选功能

- Author -

进阶的码农

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS通过相同的name进行表格求和代码
Aug 18 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
小试SVG之新手小白入门教程
Jan 08 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
vue实现节点增删改功能
Sep 26 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
JS面向对象编程基础篇（一） 对象和构造函数实例详解
Mar 03 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
微信小程序实现无限滚动列表
May 29 #Javascript
微信小程序自定义轮播图
Nov 04 #Javascript
微信小程序实现带缩略图轮播效果
Nov 04 #Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 #Javascript
微信小程序实现下拉菜单切换效果
Mar 30 #Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 #Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 #Javascript
C#面试题(90) LINUX面试题(83) 网络工程师面试题(96) Oracle面试题(81) 软件测试工程师面试题(53) MySQL面试题(19) PYTHON面试题(27) Javascript面试题(44) 软件工程师面试题(40) EJB面试题(46)
You might like
PHP的引用详解
2015/02/22 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
详解jQuery事件
2017/01/13 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
浅谈webpack组织模块的原理
2018/03/10 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
全面分析Python的优点和缺点
2018/02/07 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
python的等深分箱实例
2019/11/22 Python
python扫描线填充算法详解
2020/02/19 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
英国顶级家庭折扣店：The Works
2017/09/06 全球购物
联想韩国官网：Lenovo Korea
2018/05/10 全球购物
Lentiamo丹麦：购买便宜的隐形眼镜
2021/01/13 全球购物
广州盈通面试题
2015/12/05 面试题
物流创业计划书
2014/02/01 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
5.12护士节活动总结
2015/02/10 职场文书
创业计划书之宠物店
2019/09/19 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android