一、概述
先放一张图解释,这是一个双向联动列表,右边滑动左边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了