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


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 相关文章推荐
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
红米手机抢购的js代码
Mar 10 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
vue如何判断dom的class
Apr 26 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 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+javascript液晶时钟
2006/10/09 PHP
Cannot modify header information错误解决方法
2008/10/08 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
JS 常用校验函数
2009/03/26 Javascript
javascript实现微信分享
2014/12/23 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
Python 去除字符串中指定字符串
2020/03/05 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
Python爬取梨视频的示例
2021/01/29 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
附答案的Java面试题
2012/11/19 面试题
高中运动会广播稿
2014/01/21 职场文书
合作经营协议书范本
2014/04/17 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
师德师风学习材料
2014/12/19 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
岁月神偷观后感
2015/06/11 职场文书
初中运动会前导词
2015/07/20 职场文书
会计入职心得体会
2016/01/22 职场文书
《小小的船》教学反思
2016/02/18 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android