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


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 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
jquery each()源代码
Feb 14 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
layui table 表格模板按钮的实例代码
Sep 21 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 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
?算你??的 PHP 程式大小
2006/12/06 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
python数据类型强制转换实例详解
2020/06/22 Python
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
自动化专业个人求职信范文
2013/11/29 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
护士自我鉴定总结
2014/03/24 职场文书
差生评语大全
2014/05/04 职场文书
小学数学教研活动总结
2014/07/01 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
MySQL学习之基础操作总结
2022/03/19 MySQL
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB