小程序
小游戏
企业微信
微信支付
扫描小程序码分享
view层动态渲染的是模拟多选框功能的列表,点击列表中的一项会改变当前项的class,我想的是 view层
<view class="{{selectedArr.indexOf(item.id)==-1?'':'active'}}" wx:for="{{arr}}" bind-tap="selectItem" data-id="{{item.id}}"></view>
但是无效,
请问怎么实现这种动态渲染列表,点击列表项切换样式呢?
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
<button
wx:for="{{item.button}}"
wx:for-item="s"
wx:for-index="idx"
style='{{ttx_testOption}}'
class="ttx_testOption {{ (opBtnId[item.index] == 'o' + index + '' + idx) ? 'ttx_optionClick' : ''}}" //-------------->样式的切 换利用
//点击对应按钮后获取 id比较
bindtap='optionClick'
id="{{'o' + index + '' + idx}}"
data-nextnum='{{item.nextNum[idx]}}'
data-num="{{item.num}}"
data-point="{{item.point}}"
data-index="{{item.index}}"
data-end='{{item.end}}'
data-score="{{item.score[idx]}}"
data-s="{{s}}"
disabled="{{(buttonClick[item.index] && (!(opBtnId[item.index] == 'o' + index + '' + idx))) ? true : false}}" // ---------------->利用点击状态与获取到的id双重判断 是否禁用按钮
>
{{s}}
<view class='ttx_circle' wx:if="{{!(opBtnId[item.index]== 'o' + index + '' + idx)}}"></view>
// ---------------->选项中的样式切换 同button按钮,但是样式反向获取
</button>
利用一个空数组--> 数组的动态添加元素实现 对应的项点击后添加true,结束页面时将该数组清空
buttonClick-->用来接收的数组 --> buttonClick[e.currentTarget.dataset.index] = true
opBtnId --> 利用空数组添加每个点击后获取的id --> opBtnId[e.currentTarget.dataset.index] = e.currentTarget.id
实现效果:
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
<button
wx:for="{{item.button}}"
wx:for-item="s"
wx:for-index="idx"
style='{{ttx_testOption}}'
class="ttx_testOption {{ (opBtnId[item.index] == 'o' + index + '' + idx) ? 'ttx_optionClick' : ''}}" //-------------->样式的切 换利用
//点击对应按钮后获取 id比较
bindtap='optionClick'
id="{{'o' + index + '' + idx}}"
data-nextnum='{{item.nextNum[idx]}}'
data-num="{{item.num}}"
data-point="{{item.point}}"
data-index="{{item.index}}"
data-end='{{item.end}}'
data-score="{{item.score[idx]}}"
data-s="{{s}}"
disabled="{{(buttonClick[item.index] && (!(opBtnId[item.index] == 'o' + index + '' + idx))) ? true : false}}" // ---------------->利用点击状态与获取到的id双重判断 是否禁用按钮
>
{{s}}
<view class='ttx_circle' wx:if="{{!(opBtnId[item.index]== 'o' + index + '' + idx)}}"></view>
// ---------------->选项中的样式切换 同button按钮,但是样式反向获取
</button>
利用一个空数组--> 数组的动态添加元素实现 对应的项点击后添加true,结束页面时将该数组清空
buttonClick-->用来接收的数组 --> buttonClick[e.currentTarget.dataset.index] = true
opBtnId -->
利用空数组添加每个点击后获取的id --> opBtnId[e.currentTarget.dataset.index] = e.currentTarget.id
实现效果: