微信小程序实现多选功能微信小程序实现多选功能
主要为大家详细介绍了微信小程序实现多选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文为大家分享了微信小程序实现多选功能的具体代码，供大家参考，具体内容如下
代码：
<!--hotblood_gongkao/pages/answer/answer.wxml-->
<!-- content -->
<view class='answer-list'>
<view class='answer-child'>
<text class='answer-title'><text style='margin-right:28rpx;'>{{num + 1}}/{{quesyion.length}}</text>{{question[num][0]}}</text>
<view class='answer-options'>
<view class="options {{selectIndex[0].sureid?'select':''}}" data-index='{{idx}}1' data-text='A' bindtap="{{whether?'':'selectAnswer'}}">
<image class="dui {{selectIndex[0].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
<text><text style='margin-right:36rpx;'> A </text>{{question[num][1]}}</text>
</view>
<view class="options {{selectIndex[1].sureid?'select':''}}" data-index='{{idx}}2' data-text='B' bindtap="{{whether?'':'selectAnswer'}}">
<image class="dui {{selectIndex[1].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
<text><text style='margin-right:36rpx;'> B </text>{{question[num][2]}}</text>
</view>
<view class="options {{selectIndex[2].sureid?'select':''}}" data-index='{{idx}}3' data-text='C' bindtap="{{whether?'':'selectAnswer'}}">
<image class="dui {{selectIndex[2].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
<text><text style='margin-right:36rpx;'> C </text>{{question[num][3]}}</text>
</view>
<view class="options {{selectIndex[3].sureid?'select':''}}" data-index='{{idx}}4' data-text='D' bindtap="{{whether?'':'selectAnswer'}}">
<image class="dui {{selectIndex[3].sureid?'dui2':''}}" src='../../images/icon-dui.png' />
<text><text style='margin-right:36rpx;'> D </text>{{question[num][4]}}</text>
</view>
</view>
</view>
<view class="answer {{isWan?'isShow':'isHide'}}">
<text>正确答案{{question[num][3]}}</text>
</view>
<view class="subBtn {{isque?'isShow':'isHide'}}" bindtap='confirm'>
<text>确定</text>
</view>
<view class="subBtn {{isOne?'isHide':'isShow'}}" bindtap='next'>
<text>{{con}}</text>
</view>
<view class="subBtn {{iswancheng?'isShow':'isHide'}}" bindtap='submit'>
<text>提交答卷</text>
</view>
</view>
CSS:
/* hotblood_gongkao/pages/answer/answer.wxss */
/* title */
.titleImg{
width: 734rpx;
height: 45rpx;
position: fixed;
top: 0;
display: flex;
flex-direction: row;
align-items: center;
left: 50%;
background: #fbfbfb;
margin-left: -367rpx;
z-index: 10;
}
.titleImg image{
height: 35rpx;
width: 100%;
}
/* end */
page{
height: 100%;
width: 100%;
background: #fbfbfb;
}
.isHide{
display: none;
}
评论0