微信小程序--添加新属性，动态展开收起查看详情
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
});
}
})最终效果图：
