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


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.fn.extend与jquery.extend
Nov 21 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
详解vue 组件注册
Nov 20 Vue.js
JavaScript实现雪花飘落效果
Dec 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
操作Oracle的php类
2006/10/09 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
JavaScript中的关联数组问题
2015/03/04 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python struct.unpack
2008/09/06 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
学习python的前途 python挣钱
2019/02/27 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
python实现井字棋小游戏
2020/03/04 Python
Python 如何实现访问者模式
2020/07/28 Python
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
市三好学生主要事迹
2014/01/28 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js