这次是想用Lin-ui的混合标签功能,相当于是一个二级分类,横栏显示一级标签,竖栏显示二级标签,
理想中的效果应该是不错的,但是现实很残酷:(
这个混合标签跟上面的标签页功能很像,只是少一级罢了,由于这个标签组件用了微信小程序里的swipper组件,高度被固定住了,而我的内容高度会很高,关健是撑不开这个swipper组件的高度,需要动态计算内容的真实高度,然后再赋给swipper组件,感觉很鸡肋又很麻烦,于是就走了另一条路,发现有一个swipeable这个参数可以控制是否启用swipper组件,就把这个参数设为"{{false}}"了,那么新的问题又来了,
就不啰嗦了,直接上图吧,要不然文字很难表达,
下面是理想中的效果,点击横栏标签之后,下面出现对应内容,有二级分类的情况下,显示竖栏标签,这个是我改过官方源码之后的效果:
下面是修改源码之前的效果,只有京东物流那个标签有内容,其它的标签内容都显示不出来,在wxml的调试界面里能看到是有内容的,
经过一翻console.log调试,没发现问题后来只有将目光移到了css上面,发现有一项能起作用,如下:
.l-tabpanel-content {
flex-direction:column
}
把flex-direction改成row或直接删除,问题就解决了
END