微信小程序分类-左侧导航与右侧内容联动优化

 由上一篇介绍了分类联动：https://blog.csdn.net/zhouhangzooo/article/details/88775790

之后，还有一些问题，比如当点击最后一个分类时，并且其商品较少时，会出现如下情况，如图

 

这样显示并不好，因此我们需要优化一下，比如判断是最后一个分类时，在右边添加一个大概高度的view，逻辑很简单，直接上代码：

<block wx:if="{{idx==good.length-1?true:false}}">

<view wx:if="{{item.data.length > 3}}" style="height:{{winHeight/4}}px;"> </view>

<view wx:elif="{{item.data.length > 2}}" style="height:{{winHeight/3}}px;"> </view>

<view wx:elif="{{item.data.length > 1}}" style="height:{{winHeight/2}}px;"> </view>

<view wx:else style="height:{{winHeight * 0.75}}px;"> </view>

</block>

直接在右侧内容的view中加入如上，判断如果是最后一个view，则显示空白的view，高度使用winHeight的大概比例，

item.data.length为右侧一个item（图中的新鲜水果），wx:for-index="idx"，wx:for="{{good}}"；

winHeight是在js中页面加载时获取：

 

最终我们演示效果：