微信小程序——订单列表显示全部和收起功能

查遍百度， 没有发现我要的，没办法只能自己写个：

一、首先wxml页面中每个订单要有独立的 【显示全部】和【收起】两个view；

正确的做法：

<view class="margin-sm padding-sm solid-top solids-bottom text-center" wx:if="{{item.goods.length>2}}" bindtap="listToggle" data-lstid="{{list_index}}">
	<button class="cu-btn round sm bg-grey" style="width:180rpx;" data-sm="{{showMore[list_index]}}" wx:if="{{!showMore[list_index]}}">显示全部</button>
	<button class="cu-btn round sm bg-grey" style="width:180rpx;" wx:if="{{showMore[list_index]}}">收起</button>
</view>

（1）、如果goods数量大于2，那么才去显示【显示全部】或【收起】两个按钮。

（2）、【显示全部】或【收起】的展示是根据当前 page 中  data 设置的 showMore[list_index] 对应的 true 或 false 来决定的。当然首次进来设置  showMore[list_index] 为 false， 这样 根据此条件 wx:if="{{!showMore[list_index]}}" 就能显示【显示全部】了。

（3）、点击事件listToggle来改变 showMore[list_index] 对应的值，如果为false， 【显示全部】显示； 如果为true， 【收起】显示。

错误的做法：

在js中page->data，设置 showmoremessage："显示全部"，点击时切换为"收起"， 这样的做法没有考虑到订单是独立的，如果这样，你点击一个，其他订单对应的按钮也会跟着变。

二、showMore如何来定义

page-》data 中定义：

showMore: {}, //每个订单中显示全部的详细情况

然后在你获取订单列表处来给 showMore 赋值

//循环 list 用来给 showMore 赋值
t.data.list.forEach((item, index) => {
	if(item.goods.length>2){
		showMoreRes[index] = !1;
	}else{
		showMoreRes[index] = !0;
	}
}),
t.setData({
	showMore: showMoreRes
}),
console.log(t.data.showMore)

这样 showMore 就能控制每个订单的【显示全部】或【收起】的展示了。

三、【显示全部】或【收起】的点击事件 listToggle

/**显示全部及收起的点击事件**/
listToggle: function(e){
	let that = this, lstid= e.currentTarget.dataset.lstid, m = that.data.showMore;
	//m[lstid] 为 false， 说明还没有展开，显示【显示全部】， 设置为true，展开，显示【收起】 
	if(!m[lstid]){
		//展开
		m[lstid] = !0;
	}else{
		//收起
		m[lstid] = !1;
		let query = wx.createSelectorQuery().in(that);
		query.selectViewport().scrollOffset();
		//#comm 跳转到指定id位置
		query.select("#list"+lstid).boundingClientRect();
		query.exec(function(res){
			console.log(res);
			var miss = res[0].scrollTop + res[1].top - 50;
			wx.pageScrollTo({
				scrollTop: miss,
				duration: 300
			});
		});
	}
	that.setData({
		showMore: m,
	});
},

else 中的 代码目的是为了【收起】之后能回到该订单的初始位置， 也就是所谓的锚点（点击按钮跳转到指定view锚点）。