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


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 相关文章推荐
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
javascript的push使用指南
Dec 05 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
js+audio实现音乐播放器
Sep 13 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/03/10 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
img的onload的另类用法
2008/01/10 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
node 版本切换的实现
2020/02/02 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
银行领导证婚词
2014/01/11 职场文书
小学生家长评语集锦
2014/01/30 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
公司年终奖分配方案
2014/06/16 职场文书
学生检讨书怎么写
2014/10/09 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
css3 选择器
2022/05/11 HTML / CSS