经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
小程序实现选择题选择效果
来源：jb51　　时间：2018/11/5 10:46:23　　对本文有异议

本文实例为大家分享了小程序实现选择题的显示方法，供大家参考，具体内容如下

下面是三张效果图：初始图，选项正确图，选项错误图。

wxml代码：

  1. <view class='selection'>
  2.  <view class='{{view1}}' bindtap='view1Click' id='1'>a</view>
  3.  <view class='{{view2}}' bindtap='view2Click' id='2'>b</view>
  4.  <view class='{{view3}}' bindtap='view3Click' id='3'>c</view>
  5.  <view class='{{view4}}' bindtap='view4Click' id='4'>d</view>
  6. </view>

js代码：

  1. Page({ 
  2.  
  3.  /** 
  4.   * 页面的初始数据 
  5.   */ 
  6.  data: { 
  7.   view1: 'selection1', 
  8.   view2: 'selection1', 
  9.   view3: 'selection1', 
  10.   view4: 'selection1', 
  11.   // 默认答案为2，后台会给的 
  12.   key: 2, 
  13.   // 选项是否被点击 
  14.   isSelect: false 
  15.  }, 
  16.  
  17.  view1Click: function(e) { 
  18.   var select = e.target.id 
  19.   // 选项没被选择时将执行 
  20.   if (!this.data.isSelect) { 
  21.    // 将选项设置为“已被选择” 
  22.    this.setData({ 
  23.     isSelect: true 
  24.    }) 
  25.    // 注意！此处必须是'=='而不是'=' 
  26.    if (select == this.data.key) { 
  27.     this.setData({ 
  28.      view1: 'selection2' 
  29.     }) 
  30.    } else { 
  31.     this.setData({ 
  32.      view1: 'selection3' 
  33.     }) 
  34.     // 将正确选项显示出来 
  35.     this.showAnswer(this.data.key) 
  36.    } 
  37.  
  38.   } 
  39.  }, 
  40.  view2Click: function(e) { 
  41.   var select = e.target.id 
  42.   // 选项没被选择时将执行 
  43.   if (!this.data.isSelect) { 
  44.    this.setData({ 
  45.     isSelect: true 
  46.    }) 
  47.    // 注意！此处必须是'=='而不是'=' 
  48.    if (select == this.data.key) { 
  49.     this.setData({ 
  50.      view2: 'selection2' 
  51.     }) 
  52.    } else { 
  53.     this.setData({ 
  54.      view2: 'selection3' 
  55.     }) 
  56.     // 将正确选项显示出来 
  57.     this.showAnswer(this.data.key) 
  58.    } 
  59.  
  60.   } 
  61.  }, 
  62.  view3Click: function(e) { 
  63.   var select = e.target.id 
  64.   // 选项没被选择时将执行 
  65.   if (!this.data.isSelect) { 
  66.    this.setData({ 
  67.     isSelect: true 
  68.    }) 
  69.    // 注意！此处必须是'=='而不是'=' 
  70.    if (select == this.data.key) { 
  71.     this.setData({ 
  72.      view3: 'selection2' 
  73.     }) 
  74.    } else { 
  75.     this.setData({ 
  76.      view3: 'selection3' 
  77.     }) 
  78.     // 将正确选项显示出来 
  79.     this.showAnswer(this.data.key) 
  80.    } 
  81.  
  82.   } 
  83.  }, 
  84.  view4Click: function(e) { 
  85.   var select = e.target.id 
  86.   // 选项没被选择时将执行 
  87.   if (!this.data.isSelect) { 
  88.    this.setData({ 
  89.     isSelect: true 
  90.    }) 
  91.    // 注意！此处必须是'=='而不是'=' 
  92.    if (select == this.data.key) { 
  93.     this.setData({ 
  94.      view4: 'selection2' 
  95.     }) 
  96.    } else { 
  97.     this.setData({ 
  98.      view4: 'selection3' 
  99.     }) 
  100.     // 将正确选项显示出来 
  101.     this.showAnswer(this.data.key) 
  102.    } 
  103.  
  104.   } 
  105.  }, 
  106.  showAnswer: function(key) { 
  107.   // 通过swith语句判断正确答案，从而显示正确选项 
  108.   switch (key) { 
  109.    case 1: 
  110.     this.setData({ 
  111.      view1: 'selection2' 
  112.     }) 
  113.     break; 
  114.    case 2: 
  115.     this.setData({ 
  116.      view2: 'selection2' 
  117.     }) 
  118.     break; 
  119.    case 3: 
  120.     this.setData({ 
  121.      view3: 'selection2' 
  122.     }) 
  123.     break; 
  124.    default: 
  125.     this.setData({ 
  126.      view4: 'selection2' 
  127.     }) 
  128.   } 
  129.  } 
  130. })

wxss代码：

  1. .selection1{
  2. width: 400rpx;
  3. height: 150rpx;
  4. background-color: grey;
  5.  
  6. display: flex;
  7. flex-direction: column;
  8. justify-content: space-around;
  9. align-items: center;
  10. }
  11. .selection2{
  12. width: 400rpx;
  13. height: 150rpx;
  14. background-color: blue;
  15. display: flex;
  16. flex-direction: column;
  17. justify-content: space-around;
  18. align-items: center;
  19. }
  20. .selection3{
  21. width: 400rpx;
  22. height: 150rpx;
  23. background-color: red;
  24. display: flex;
  25. flex-direction: column;
  26. justify-content: space-around;
  27. align-items: center;
  28. }
  29. .selection{
  30. width: 750rpx;
  31. height: 800rpx;
  32. display: flex;
  33. flex-direction: column;
  34. justify-content: space-around;
  35. align-items: center;
  36. }
  37.  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号