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


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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
原生javascript获取元素样式
Dec 31 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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 文件上传模型,支持多文件上传
2009/08/13 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
php 文件上传实例代码
2012/04/19 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
vue实现弹幕功能
2019/10/25 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
python发送伪造的arp请求
2014/01/09 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Python基础知识点 初识Python.md
2019/05/14 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python二元赋值实用技巧解析
2019/10/25 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
大学军训感言300字
2014/03/09 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
放假通知怎么写
2015/08/18 职场文书
个人向公司借款协议书
2016/03/19 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android