首页
所有分类
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读写(删除)Cookie实例详解
Apr 17 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
JavaScript全屏和退出全屏事件总结（附代码）
Aug 17 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
js module大战
Apr 19 Javascript
基于JavaScript实现单例模式
Oct 30 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
pytest(3) enumerate(1) Excel(4) Coroutine(1) csv(4) find(1) gevent(1) 进销存(1) greenlet(1) list(1)
You might like
php获取url参数方法总结
2014/11/13 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）
2010/03/24 Javascript
在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）
2011/12/20 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
全面解析Bootstrap表单使用方法（表单控件状态）
2015/11/24 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python ftp上传文件
2016/02/13 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
HTML5+CSS3：3D展示商品信息示例
2017/01/03 HTML / CSS
英国最大的邮寄种子和植物公司：Thompson & Morgan
2017/09/21 全球购物
电子信息科学专业自荐信
2014/01/30 职场文书
2014年师德承诺书
2014/05/23 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
见习报告的格式
2014/10/31 职场文书
考试没考好检讨书（精选篇）
2014/11/16 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
JavaScript分页组件使用方法详解
2021/07/26 Javascript
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers