需求背景:
小程序商品数据不是太多,所以无需分页,但是全部展示又太占位置。所以做一个超过两件进行展开折叠,用户自己
效果图
实现思路
前景: 超过两件,展示展开折叠图例。
点击图例,传数据,和标识进去。
如果 showAll == true ,表明要全部展示,直接将传入的数据返回
如果showAll == false , 表明只展示两件。循环传入数据,将其保存,并返回
index.wxs
var goodsList = function (list = [], showAll) {
if (showAll == false) {
var showList = [];
if (list.length > 2) {
for (var i = 0; i < 2; i++) {
showList.push(list[i]);
}
} else {
showList = list;
}
return showList;
} else {
return list;
}
};
module.exports = {
goodsList: goodsList,
};
在需要的地方引入即可
index.wxml
<wxs module="handlerShow" src="./index.wxs"></wxs>
<block wx:for="{{handlerShow.goodsList(goodsList , showAll)}}" wx:key="index">
</block>
由于引入时,还没有数据,所以在形参里传入默认参数