一、概述
先放一张图解释，这是一个双向联动列表，右边滑动左边active状态跟着跳动，左边点击右边也会跟着滑动到相应位置。
那么就这样一个双向列表，如果说某一个分类数量如果很多很多，那么列表会变得很长，用户会觉得在一个品类中待上太久，从而造成体验不太好，那么这篇文章就是介绍一个可行的解决方法。
二、解决方法：动态渲染展开收起状态
左思右想发现抖音的这个展开收起的交互，比较适合解决这种场景，如下图：
三、逻辑
盘一下逻辑：
我希望刚开始上来每个种类最多只有10个（后台每次请求传10个），那么如果第一次请求某个种类达到10个，说明后台该种类一定大于等于10个，那么将有一个展开按钮，如果小于10个就没有展开按钮。
如果我展开之后依然返回了十个，那么我认为后台可能还有该种类，因此也显示展开，而第二次不足10个的，应当显示收起（收回刚刚展开的）。
按照这个逻辑解释就是 如果当前获取到的种类是10的倍数，那么说明后台可能还存在未获取的数据，而不是10的倍数的说明已经获取完成了（如果没获取完成，会获取10个满，而不是10个以下）
代码表示：
if(productData.length%10==0){
//显示展开
}
if(productData.length%10!=0){
//显示收起
}当然这还有问题：
如果刚开始上来获取的数量也不是10的倍数呢？比如种类只有5个，只能获取5个。这时候应该不显示收起，那么微调一下代码：
if(productData.length%10==0){
//显示展开
}
if(productData.length%10!=0&&productData.length>10){
//显示收起
}四、具体实现
wxml代码：
<view class="category-container" wx:for="{
{productArr}}" id="{
{'right'+index}}">
<view class="category-name">{
{category[index].category_name}}</view>
<view wx:for="{
{item}}" wx:for-item="good" class="good-container" bindtap="goProductDetail" data-id="{
{good._id}}">
<-- 省略 -->
</view>
<view class="spread" wx:if="{
{item.length%10==0}}">
<text style="color:#e3e3e3;margin-right:20rpx">——</text>
<text style="color:#848484;font-weight:900;font-size:30rpx" data-categorytype="{
{category[index].category_type}}" data-page="{
{item.length}}" data-index="{
{index}}" bindtap="spreadMore">展开更多{
{category[index].category_name}}</text>
</view>
<view class="retract" wx:if="{
{item.length>10&&item.length%10!=0}}">
<text style="color:#e3e3e3;margin-right:20rpx">——</text>
<text style="color:#848484;font-weight:900;font-size:30rpx" bindtap="retract" data-index="{
{index}}">收起</text>
</view>
</view>这里的spread和retrace用到了wx:if 按照前面的逻辑显示展开和收起
然后就是点击展开从后台继续获取数据添加到productArr里面
然后点击收起就是截取前10个
展开和收起事件已经不是重点了，有需要可以看下后面：
async spreadMore(e) {
const {
categorytype: category_type,
page,
index
} = e.currentTarget.dataset
const {result:{data:{data:productData}}}=await product.getProductByCategory(category_type,page)
this.setData({
[`productArr[${index}]`]:this.data.productArr[index].concat(productData)
})
},
retract(e){
const {index}=e.currentTarget.dataset
this.setData({
[`productArr[${index}]`]:this.data.productArr[index].slice(0,10)
})
},代码习惯你们可能有点看不懂，所以其实理解上面的第三部分逻辑就ok了