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


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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
JavaScript中链式调用之研习
2011/04/07 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python批量修改文件后缀的方法
2014/01/26 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python对切片命名的实现方法
2018/10/16 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
匡威德国官网:Converse德国
2019/01/26 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
母亲节演讲稿范文
2014/01/02 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技