小程序实现选择题选择效果


Posted in Javascript onNovember 04, 2018

本文实例为大家分享了小程序实现选择题的显示方法,供大家参考,具体内容如下

下面是三张效果图:初始图,选项正确图,选项错误图。

小程序实现选择题选择效果小程序实现选择题选择效果小程序实现选择题选择效果

wxml代码:

<view class='selection'>
 <view class='{{view1}}' bindtap='view1Click' id='1'>a</view>
 <view class='{{view2}}' bindtap='view2Click' id='2'>b</view>
 <view class='{{view3}}' bindtap='view3Click' id='3'>c</view>
 <view class='{{view4}}' bindtap='view4Click' id='4'>d</view>
</view>

js代码:

Page({ 
 
 /** 
  * 页面的初始数据 
  */ 
 data: { 
  view1: 'selection1', 
  view2: 'selection1', 
  view3: 'selection1', 
  view4: 'selection1', 
  // 默认答案为2,后台会给的 
  key: 2, 
  // 选项是否被点击 
  isSelect: false 
 }, 
 
 view1Click: function(e) { 
  var select = e.target.id 
  // 选项没被选择时将执行 
  if (!this.data.isSelect) { 
   // 将选项设置为“已被选择” 
   this.setData({ 
    isSelect: true 
   }) 
   // 注意!此处必须是'=='而不是'=' 
   if (select == this.data.key) { 
    this.setData({ 
     view1: 'selection2' 
    }) 
   } else { 
    this.setData({ 
     view1: 'selection3' 
    }) 
    // 将正确选项显示出来 
    this.showAnswer(this.data.key) 
   } 
 
  } 
 }, 
 view2Click: function(e) { 
  var select = e.target.id 
  // 选项没被选择时将执行 
  if (!this.data.isSelect) { 
   this.setData({ 
    isSelect: true 
   }) 
   // 注意!此处必须是'=='而不是'=' 
   if (select == this.data.key) { 
    this.setData({ 
     view2: 'selection2' 
    }) 
   } else { 
    this.setData({ 
     view2: 'selection3' 
    }) 
    // 将正确选项显示出来 
    this.showAnswer(this.data.key) 
   } 
 
  } 
 }, 
 view3Click: function(e) { 
  var select = e.target.id 
  // 选项没被选择时将执行 
  if (!this.data.isSelect) { 
   this.setData({ 
    isSelect: true 
   }) 
   // 注意!此处必须是'=='而不是'=' 
   if (select == this.data.key) { 
    this.setData({ 
     view3: 'selection2' 
    }) 
   } else { 
    this.setData({ 
     view3: 'selection3' 
    }) 
    // 将正确选项显示出来 
    this.showAnswer(this.data.key) 
   } 
 
  } 
 }, 
 view4Click: function(e) { 
  var select = e.target.id 
  // 选项没被选择时将执行 
  if (!this.data.isSelect) { 
   this.setData({ 
    isSelect: true 
   }) 
   // 注意!此处必须是'=='而不是'=' 
   if (select == this.data.key) { 
    this.setData({ 
     view4: 'selection2' 
    }) 
   } else { 
    this.setData({ 
     view4: 'selection3' 
    }) 
    // 将正确选项显示出来 
    this.showAnswer(this.data.key) 
   } 
 
  } 
 }, 
 showAnswer: function(key) { 
  // 通过swith语句判断正确答案,从而显示正确选项 
  switch (key) { 
   case 1: 
    this.setData({ 
     view1: 'selection2' 
    }) 
    break; 
   case 2: 
    this.setData({ 
     view2: 'selection2' 
    }) 
    break; 
   case 3: 
    this.setData({ 
     view3: 'selection2' 
    }) 
    break; 
   default: 
    this.setData({ 
     view4: 'selection2' 
    }) 
  } 
 } 
})

wxss代码:

.selection1{
width: 400rpx;
height: 150rpx;
background-color: grey;

display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.selection2{
width: 400rpx;
height: 150rpx;
background-color: blue;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.selection3{
width: 400rpx;
height: 150rpx;
background-color: red;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.selection{
width: 750rpx;
height: 800rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

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

Javascript 相关文章推荐
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
原生js轮播特效
May 18 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
小程序实现单选多选功能
Nov 04 #Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 #Javascript
微信小程序实现登录注册tab切换效果
Dec 29 #Javascript
原生js实现淘宝放大镜效果
Oct 28 #Javascript
微信小程序如何获取手机验证码
Nov 04 #Javascript
微信小程序实现弹出层效果
May 26 #Javascript
微信小程序实现预览图片功能
Oct 22 #Javascript
You might like
如何开始收听短波广播
2021/03/01 无线电
Home Coffee Roasting
2021/03/03 咖啡文化
php判断一个数组是否为有序的方法
2015/03/27 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
js日期时间补零的小例子
2013/03/05 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
python实现知乎高颜值图片爬取
2019/08/12 Python
深入学习python多线程与GIL
2019/08/26 Python
python实现智能语音天气预报
2019/12/02 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
大学自我评价
2014/02/12 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
六五普法宣传标语
2014/10/06 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
银行培训心得体会范文
2016/01/09 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android