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


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 相关文章推荐
window.open 以post方式传递参数示例代码
Feb 27 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
js实现拾色器插件(ColorPicker)
May 21 Javascript
JS继承实现方法及优缺点详解
Sep 02 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
smarty模板中拼接字符串的方法
2014/02/14 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python运行DLL文件的方法
2020/01/17 Python
用Python进行websocket接口测试
2020/10/16 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
小学生家长评语大全
2014/02/10 职场文书
一月红领巾广播稿
2014/02/11 职场文书
主持人演讲稿
2014/05/13 职场文书
团队精神的演讲稿
2014/05/14 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
党员理论学习心得体会
2016/01/21 职场文书
工作报告范文
2019/06/20 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
MySQL查询日期时间
2022/05/15 MySQL