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


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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
js选项卡的制作方法
Jan 23 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
小程序实现单选多选功能
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 反向排序和随机排序代码
2010/06/30 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php的ddos攻击解决方法
2015/01/08 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
php和nginx交互实例讲解
2019/09/24 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
JavaScript闭包详解
2015/02/02 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
windows下添加Python环境变量的方法汇总
2018/05/14 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
Python异常处理机制结构实例解析
2020/07/23 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
公司前台接待岗位职责
2013/12/03 职场文书
教学器材管理制度
2014/01/26 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书