<view class="answer" wx:for="{{curQuestion.answerList}}" wx:key="index" bindtap="answerClick" data-index="{{index}}"> <view style="background:{{curQuestion.answerFlag && item.realFlag?'#1CC18D':(curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index ? '#FA6C6C':'#fff')}};color:{{curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index)?'#fff':'#000'}}" class="answer-item"> {{item.name}}</view> <view class="icon-box" wx:if="{{curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index)}}"> <text wx:if="{{curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index}}" class="cuIcon-roundclosefill choose-fail"></text> <text wx:if="{{curQuestion.answerFlag && item.realFlag}}" class="cuIcon-roundcheckfill choose-success"></text> </view> </view> 代码解释
时间: 2024-03-28 13:36:58 浏览: 18
这段代码是一个小程序中用于展示答题选项的部分。其中,通过wx:for循环遍历curQuestion.answerList数组中的每个选项,并通过数据绑定将选项的索引值绑定到data-index属性上。通过选项的name属性展示选项的文本内容。
当用户点击某个选项时,会触发answerClick事件,将用户选择的选项的索引值curQuestion.curIndex保存到当前页面的数据中。
在展示选项时,通过curQuestion.answerFlag判断用户是否已经做出选择,根据选项是否为正确答案以及用户选择的是否正确,分别设置不同的背景色和字体颜色,并在正确/错误的选项上展示不同的图标。
相关问题
<view class="answer-list"> <view class="answer" wx:for="{{curQuestion.answerList}}" wx:key="index" bindtap="answerClick" data-index="{{index}}"> <view style="background:{{curQuestion.answerFlag && item.realFlag?'#1CC18D':(curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index ? '#FA6C6C':'#fff')}};color:{{curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index)?'#fff':'#000'}}" class="answer-item"> {{item.name}}</view> <view class="icon-box" wx:if="{{curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index)}}"> <text wx:if="{{curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index}}" class="cuIcon-roundclosefill choose-fail"></text> <text wx:if="{{curQuestion.answerFlag && item.realFlag}}" class="cuIcon-roundcheckfill choose-success"></text> </view> </view> </view> 转uniapp写法
<view class="answer-list">
<view class="answer" v-for="(item, index) in curQuestion.answerList" :key="index" @tap="answerClick" :data-index="index">
<view :style="{background: curQuestion.answerFlag && item.realFlag ? '#1CC18D' : (curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index ? '#FA6C6C' : '#fff'), color: curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index) ? '#fff' : '#000'}" class="answer-item">
{{item.name}}
</view>
<view class="icon-box" v-if="curQuestion.answerFlag && (item.realFlag || curQuestion.curIndex == index)">
<text v-if="curQuestion.answerFlag && !item.realFlag && curQuestion.curIndex == index" class="cuIcon-roundclosefill choose-fail"></text>
<text v-if="curQuestion.answerFlag && item.realFlag" class="cuIcon-roundcheckfill choose-success"></text>
</view>
</view>
</view>
<view class="signList" wx:for="{{signList}}" wx:for-item="item" wx:key="index" wx:for-index="index"> <navigator bindtap="navigateTo" url="item.url"> <view class="chapter">{{item.rect}} <view class="title">{{item.title}}</view> </view> </navigator> </view> navigateTo(){ wx.navigateTo({ url: 'item.url', }) } 这个写法为什么跳转不到相应的页面?
这是因为在 `navigateTo` 函数中,`url` 的值被写死为了 `"item.url"`,并没有获取到当前点击的矩形对应的 `url` 值。可以通过 `event.currentTarget.dataset` 获取当前点击的矩形对应的数据,然后从中获取到 `url` 的值。修改代码如下:
```
<view class="signList" wx:for="{{signList}}" wx:for-item="item" wx:key="index" wx:for-index="index">
<navigator bindtap="navigateTo" url="{{item.url}}" data-index="{{index}}">
<view class="chapter">
<view class="title">{{item.title}}</view>
</view>
</navigator>
</view>
```
在 `navigateTo` 函数中,通过 `event.currentTarget.dataset` 获取当前点击的矩形对应的数据,然后从中获取到 `url` 的值。
```
navigateTo(event) {
const index = event.currentTarget.dataset.index;
const url = this.data.signList[index].url;
wx.navigateTo({
url: url
});
}
```
这样就可以跳转到相应的页面了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)