问题描述:小程序从数组从循环取数据,将符合条件的数据显示出来,并且控制在首页的显示数量不超过3条
wxml:
<text wx:for="{{product_nav}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}"
wx:key="unique" bindtap="navbar_product">{{item}}</text>
并在要显示的内容处加上:<view class=" {{item.isShow?'show':'hide'}}"></view>
js:
navbar_product: function (e) {
this.setData({
currentTab: e.currentTarget.dataset.idx,
})
this.showList(e);
},
showList: function (e) {
let i = 0;
let a = 0;
let arrayItem = this.data.productItems;//获取循环数组对象
for (let item of arrayItem) {
if (item.typeId == e.currentTarget.dataset.idx) {
if (a<3) {
arrayItem[i].isShow = "true"
a++;
} else {
arrayItem[i].isShow = ""
break;
}
}
i++;
}
this.setData({
productItems: arrayItem
})
}
wxss:
.show{
display: block;
}
.hide{
display: none;
}