Wechat апплет, две кнопки раскрываются одновременно - PullRequest
Новая
       8

Wechat апплет, две кнопки раскрываются одновременно

0 голосов
/ 24 января 2019

Две кнопки на одной странице:

  • кнопка A содержит две вложенные кнопки c и d
  • кнопка B содержит две вложенные кнопки e и f

Когдапользователь

  • нажмите кнопку A, подпункты c и d должны раскрыться
  • нажмите кнопку B, подпункты e и f должны быть раскрыты

Но теперь, когдая нажимаю кнопку A или B, все под-кнопки расширяются, в то время как AB не должны влиять друг на друга. 

<view class="bg-white" wx:for="{{ dataInfo }}" wx:key="item">
    <view class="data-info" data-idx="{{ index }}" bindtap="expandDetail">
        <view>
            <button class="aaa" disabled="{{disabled}}" bindtap='submit'>
                <text>AAA</text>
            </button>
        </view>
    </view>
    <!-- 展开 -->
    <view class="data-expand p10 border-bottom" wx:if="{{ item.flag }}">
        <button class="ccc" type="warn">ccc</button>
        <button class="ddd" type="warn">ddd</button>
    </view>
</view>
<view class="bg-white" wx:for="{{ dataInfo }}" wx:key="item">
    <view class="data-info" data-idx="{{ index }}" bindtap="expandDetail">
        <view>
            <button class="bbb" disabled="{{disabled}}" bindtap='submit'>
                <text>BBB</text>
            </button>
        </view>
    </view>
    <!-- 展开 -->
    <view class="data-expand p10 border-bottom" wx:if="{{ item.flag }}">
        <button class="eee" type="warn">eee</button>
        <button class="fff" type="warn">fff</button>
    </view>
</view>

 Page({
    data: {
        tempInfo: [{}, ],
        dataInfo: [],
    },
    expandDetail: function (e) {
        var idx = e.currentTarget.dataset.idx,
        key = "dataInfo[" + idx + "].flag",
        val = this.data.dataInfo[idx].flag;
        this.setData({
            [key]: !val
        });
    },
    onLoad: function (opt) {
        for (var i in this.data.tempInfo) {
            this.data.tempInfo[i].flag = false;
        };
        this.setData({
            dataInfo: this.data.tempInfo
        });
    },
 })
...