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


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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
XENON基于JSON变种
Jul 27 Javascript
Javascript 命名空间模式
Nov 01 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
node中的session的具体使用
Sep 14 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP 替换模板变量实现步骤
2009/08/24 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
jquery简单体验
2007/01/10 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python yield的用法实例分析
2020/03/06 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
经济与贸易专业应届生求职信
2013/11/19 职场文书
《钱学森》听课反思
2014/03/01 职场文书
生物技术专业求职信
2014/06/10 职场文书
超市店庆活动方案
2014/08/31 职场文书
人事局接收函
2015/01/30 职场文书
平遥古城导游词
2015/02/03 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android