列表动态渲染 修改样式
发布于 6 年前 作者 haoxiuying 14578 次浏览 来自 问答

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

实现效果:


回到顶部