微信小程序--添加新属性,动态展开收起查看详情

wxml部分:
    <view class="data-list">
        <view class="bg-white" wx:for="{{ dataInfo }}" wx:key="item">
            <view class="data-info mt10 border-top-bottom op-active" data-idx="{{ index }}" bindtap="expandDetail">
                <view class="op-flex-box">
                    <view class="left-box op-flex-box">
                        <span class="fb">采购子项号:{{ item.subNum }}span>
                        <span>{{ item.grade }} / {{ item.spec }} / {{ item.weight }}span>
                    view>
                    <span class="op-down-arrow {{ item.flag? 'active' : '' }}">span>
                view>
                <progress percent="{{ item.percentage }}" backgroundColor="#eeeeee" activeColor="#ff6600" show-info active />
            view>
            
            <view class="data-expand p10 border-bottom" wx:if="{{ item.flag }}">
                
                <view class="data-progress mb10">
                    <view class="lh30 tc">生产进度view>
                    <view class="data-table color-666 f24">
                        <view class="op-flex-box">
                            <span>
                                <image class="icon-product" src="{{ productionIcon1 }}">image>
                                <em>材料申请em>
                                <em>{{ productionDetail.material }}em>
                            span>
                            <image class="icon-right" src="{{ rightIcon }}">image>
                            <span>
                                <image class="icon-product" src="{{ productionIcon2 }}">image>
                                <em>炼钢工序em>
                                <em>{{ productionDetail.steelmaking }}em>
                            span>
                            <image class="icon-right" src="{{ rightIcon }}">image>
                            <span>
                                <image class="icon-product" src="{{ productionIcon3 }}">image>
                                <em>热轧轧制em>
                                <em>{{ productionDetail.hotrolling }}em>
                            span>
                            <image class="icon-right" src="{{ rightIcon }}">image>
                            <span>
                                <image class="icon-product" src="{{ productionIcon4 }}">image>
                                <em>冷轧轧制em>
                                <em>{{ productionDetail.coldrolling }}em>
                            span>
                            <image class="icon-right" src="{{ rightIcon }}">image>
                            <span>
                                <image class="icon-product" src="{{ productionIcon5 }}">image>
                                <em>热镀锌em>
                                <em>{{ productionDetail.hotgalvanizing }}em>
                            span>
                            <image class="icon-right" src="{{ rightIcon }}">image>
                            <span>
                                <image class="icon-product" src="{{ productionIcon6 }}">image>
                                <em>准发确认em>
                                <em>{{ productionDetail.confirm }}em>
                            span>
                        view>
                    view>
                view>
                
                <view class="data-progress">
                    <view class="lh30 tc">物流进度view>
                    <view class="data-table color-666 f24">
                        <view class="op-flex-box">
                            <span>
                                <image class="icon-product" src="{{ logisticIcon1 }}">image>
                                <em>准发量em>
                                <em>{{ logisticDetail.totalQty }}em>
                            span>
                            <image class="icon-right long" src="{{ rightIcon }}">image>
                            <span>
                                <image class="icon-product" src="{{ logisticIcon2 }}">image>
                                <em>集港量em>
                                <em>{{ logisticDetail.collectQty }}em>
                            span>
                            <image class="icon-right long" src="{{ rightIcon }}">image>
                            <span>
                                <image class="icon-product" src="{{ logisticIcon3 }}">image>
                                <em>到港量em>
                                <em>{{ logisticDetail.arrivalQty }}em>
                            span>
                            <image class="icon-right long" src="{{ rightIcon }}">image>
                            <span>
                                <image class="icon-product" src="{{ logisticIcon4 }}">image>
                                <em>到库量em>
                                <em>{{ logisticDetail.stockQty }}em>
                            span>
                        view>
                    view>
                view>
            view>
        view>
    view>
less:部分
    .data-list {
        .data-info {
            padding: 4rpx 20rpx;
            .left-box {
                flex-direction: column;
                align-items: flex-start;
                flex: 1;
                line-height: 60rpx;
            }
            .op-down-arrow {
                margin-left: 50rpx;
                margin-right: 0;
            }
        }
        .data-expand {
            .data-progress {
                background: #f8f8f8;
                .data-table {
                    padding: 20rpx;
                    .icon-right {
                        width: 22rpx;
                        height: 14rpx;
                        position: relative;
                        top: -45rpx;
                        &.long {
                            width: 38rpx;
                        }
                    }
                    >.op-flex-box {
                        span {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                            .icon-product {
                                width: 60rpx;
                                height: 60rpx;
                                margin-bottom: 20rpx;
                            }
                            em {
                                font-size: 24rpx;
                                line-height: 40rpx;
                                color: #666666;
                            }
                        }
                    }
                }
            }
        }
    }
Js代码:
Page({
    data: { // 定义data
        tempInfo: [{ // 模拟后台数据
            id: 1,
            subNum: 'C1609050001',
            percentage: 30,
            grade: 'SPCC',
            spec: '2.5*1200*C',
            weight: 500
        }, {
            id: 2,
            subNum: 'A1609050001',
            percentage: 80,
            grade: 'SPCC',
            spec: '3.5*1200*C',
            weight: 100
        }],
        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
        });
    }
})

最终效果图:
微信小程序--添加新属性,动态展开收起查看详情_第1张图片

你可能感兴趣的:(微信小程序)