微信小游戏选择按钮选项错误显示错误同时显示正确

最新推荐文章于 2025-03-29 20:04:49 发布

原创最新推荐文章于 2025-03-29 20:04:49 发布 · 835 阅读

1 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一个基于微信小程序实现的选择题组件，通过wxml、wxss和js代码展示了如何创建一个具有反馈效果的选择题，包括正确和错误答案的视觉提示。组件支持动态选项和答案配置。

效果如下:

wxml:

<view class='difficult2 '>
  <block wx:for="{{dif2_select}}" wx:key="{{index}}">
    <view class="select {{item==answer&&id!=-1?'correct':''}}  {{item!=answer&&index==id?'error':''}}" bindtap='choose_2' data-concent='{{item}}' data-index='{{index}}'>   
        {{item}}</view>
  </block>
</view>

wxss:

/* 难度2 */
.difficult2 {
  margin-top: 65rpx;
}
 
.difficult2 .select {
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 80rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #333;
}
 
.difficult2 .error {
  background: #ff4c4d;
  color: #fff;
}
 
.difficult2 .correct {
  background: #3ccc1f;
  color: #fff;
}

 
data:{
    id:-1,
    answer: '迪丽热巴',  //正确答案
    dif2_select: ['迪丽热巴', '古力娜扎', '热依扎', '郑爽'],  //选项
}
 
 
 choose_2: function (e) {
    var that = this;
    console.log(e.currentTarget.dataset.index);
    var index = e.currentTarget.dataset.index; //本次点击的下标
    that.setData({
      id: index
    })
    },