小程序实现选择题选择效果
导读：本文共2369字符，通常情况下阅读需要8分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 本文实例为大家分享了小程序实现选择题的显示方法，供大家参考，具体内容如下下面是三张效果图：初始图，选项正确图，选项错误图。wxml代码：<view class='selection'> <view class='{{view1}}' bindtap='view1Click' id='1'>a</view> &l... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。本文实例为大家分享了小程序实现选择题的显示方法，供大家参考，具体内容如下
下面是三张效果图：初始图，选项正确图，选项错误图。
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;}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
小程序实现选择题选择效果的详细内容，希望对您有所帮助，信息来源于网络。