收藏
回答

列表动态渲染 修改样式

view层动态渲染的是模拟多选框功能的列表,点击列表中的一项会改变当前项的class,我想的是 view层

<view class="{{selectedArr.indexOf(item.id)==-1?'':'active'}}" wx:for="{{arr}}" bind-tap="selectItem" data-id="{{item.id}}"></view>

但是无效,

请问怎么实现这种动态渲染列表,点击列表项切换样式呢?


最后一次编辑于  2018-01-16  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • 龙
    2018-07-06

    <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

    实现效果:



    2018-07-06
    赞同
    回复