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


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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
es6函数之箭头函数用法实例详解
Apr 25 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 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简单实现加减乘除计算器
2014/01/06 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
javascript prototype 原型链
2009/03/12 Javascript
js 内存释放问题
2010/04/25 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
python学习手册中的python多态示例代码
2014/01/21 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python计算字符宽度的方法
2016/06/14 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python append、extend与insert的区别
2016/10/13 Python
python中os模块详解
2016/10/14 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
如何表示python中的相对路径
2020/07/08 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
《珍珠泉》教学反思
2014/02/20 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
项目负责人任命书
2014/06/04 职场文书
房屋授权委托书范本
2014/10/07 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers