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


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图片预加载技术(详细演示)
Mar 12 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 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生成带有雪花背景的验证码
2008/09/28 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php表单敏感字符过滤类
2014/12/08 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python线程详解
2015/06/24 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python基于opencv检测程序运行效率
2019/12/28 Python
Python读取YAML文件过程详解
2019/12/30 Python
Python tkinter模版代码实例
2020/02/05 Python
利用python生成照片墙的示例代码
2020/04/09 Python
python speech模块的使用方法
2020/09/09 Python
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
生日邀请函范文
2014/01/13 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers