微信小程序实现循环嵌套数据选择

本文实例为大家分享了微信小程序实现循环嵌套数据选择的具体代码，供大家参考，具体内容如下

一、效果展示

二、代码实现

在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况，需要利用wx:for嵌套实现数据的展示。这时，外层循环正常循环，内层循环需要利用wx:for-item将item重新命名。

<scroll-view scroll-y class="scrollTime">
    <view 
        class="dateItem" 
        wx:for="{{serviceTime}}" 
        wx:key="date" 
        wx:for-index="id" 
        data-index="{{index}}">
        <view class="date">
            <text class="dateTxt">{{item.month}}月{{item.day}}日</text>
        </view>
        <view class="time">
            <block wx:for="{{item.timeFrame}}" wx:key="items" wx:for-item="items">
                <view 
                    wx:if="{{items.number !== 0}}"
                    class="{{items.isSelect ? 'timeItem-active' : 'timeItem'}}"
                    data-select-index="{{id}}" 
                    data-attr-index="{{index}}"
                    data-content="{{serviceTime}}"
                    bindtap="bindleTimeItemTap" >
                    <text class="timeTxt">{{items.time}}</text>
                    <view >
                        <text class="numberTxt">剩余：</text>
                        <text class="number">{{items.number}}</text>
                    </view>
                    <view class="selectItem" wx:if="{{items.isSelect}}">
                        <image class="image-select" src="../../../icons/label_select.png"/>
                    </view>
                </view>
                <view wx:else class="timeItem-None">
                    <text class="timeTxt-full">{{items.time}}</text>
                    <text class="numberTxt-full">已满</text>
                </view>
            </block>
        </view>
    </view>
    <view class="scrollViewFooter">
        <text class="footerTxt">没有更多了</text>
    </view>
</scroll-view>

选择某一个数据时，需要在数据对象中添加一个是否选中的字段，将未被选择的数据置false，选择的数据置true，实现选中后样式的更改。

// 假数据结构
let serviceTime = [
    {
        day : 1,
        month : 8, 
        timeFrame : [
            {
                time : '8:00-10:00',
                number : 2,
            },
            {
                time : '10:00-12:00',
                number : 0,
            },
            {
                time : '14:00-16:00',
                number : 2,
            },
        ]
    },
];

Page({
    /**
     * 页面的初始数据
     */
    data: {
        serviceTime : serviceTime,
        selectDay : null,
        selectMonth : null,
        selectTime : null,
    },
    
    /**
     * scroll-view中组件选择点击事件-时间 获取当前选择时间
     */
    bindleTimeItemTap(e) {
        let that = this;
        let selectIndex = e.currentTarget.dataset.selectIndex;
        let attrIndex = e.currentTarget.dataset.attrIndex;
        let content = e.currentTarget.dataset.content;
        var cnt = content.length;
        // 将其他按钮选择状态置false
        for (var i = 0; i < cnt ; i++){
            var count = content[i].timeFrame.length;
            for (var j = 0; j < count; j++) {
                content[i].timeFrame[j].isSelect = false;
            }
        }
        // 将选择的按钮选择状态置true
        content[selectIndex].timeFrame[attrIndex].isSelect = true;
        that.setData({
            serviceTime: content,
            selectDay: content[selectIndex].day,
            selectMonth: content[selectIndex].month,
            selectTime: content[selectIndex].timeFrame[attrIndex].time,
        })
    },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。