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


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 相关文章推荐
jquery转盘抽奖功能实现
Nov 13 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
js实现烟花特效
Mar 02 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
梳理一下vue中的生命周期
Dec 30 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
ThinkPHP采用模块和操作分析
2011/04/18 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
vue实现文件上传功能
2018/08/13 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
Python查看微信撤回消息代码
2018/06/07 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
如何获取Python简单for循环索引
2019/11/21 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
python求前n个阶乘的和实例
2020/04/02 Python
Python如何将装饰器定义为类
2020/07/30 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
个人应聘自我评价分享
2013/11/18 职场文书
财务主管的岗位职责
2013/12/30 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
青蓝工程实施方案
2014/03/27 职场文书
社区居务公开实施方案
2014/03/27 职场文书
vue 实现上传组件
2021/05/31 Vue.js