首页
所有分类
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 相关文章推荐
关于query Javascript CSS Selector engine
Apr 12 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 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
transaction(1) PyAutoGUI(1) 百度地图(1) gRPC(3) 继承(1) 主从复制(1) Master(1) Slave(1) 封装(1) variables(1)
You might like
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python 连连看连接算法
2008/11/22 Python
python删除列表中重复记录的方法
2015/04/28 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
纽约JewelryAffairs珠宝店：精细金银时尚首饰
2017/02/05 全球购物
远程Wi-Fi宠物监控相机：Petcube
2017/04/26 全球购物
维多利亚的秘密官方旗舰店：VICTORIA’S SECRET
2018/04/02 全球购物
Bravofly德国：预订廉价航班和酒店
2019/09/22 全球购物
英国领先的在线礼品店：Getting Personal
2019/09/24 全球购物
英国买鞋网站：Charles Clinkard
2019/11/14 全球购物
商场消防管理制度
2014/01/12 职场文书
英文自荐信常用句子
2014/03/26 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
求职信范文怎么写
2015/03/19 职场文书
培训通知
2015/04/17 职场文书
教师节班会开场白
2015/06/01 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS