不知道如何分类,因为我觉得这个问题更多其实算是整体框架的一种局限,不一定能解决,但还是想问问。
问题场景:在我的小程序中,会经常性的有那种上边是navBar栏,然后点击切换对应的页面(多是列表)。然后我就想写一个通用的组件,这样就不用每次都写点击切换控制显示隐藏的处理,因为这个逻辑是通用的。
问题表现:但是在我实际写组件的时候遇到了一个问题,就是具体控制列表渲染的应该是在页面中进行的,组件只负责点击显示或隐藏某个navBarItem的列表,用slot并不能满足我的需求,因为这个navBar列表数量不一致,而且也无法在组件中控制slot的显示与隐藏。
不知道各位有比较好的建议没
没懂你具体问题是啥。。说下我觉得可能用的到的方法吧
1、可以传递方法名字到组件里,组件里可以用getCurrentPages拿到当前页面实例去调用页面的方法
2、页面里能用 this.selectComponent拿到组件的实例,调用组件实例的方法
3、组件的属性能有observer属性,在属性被父页面修改后触发
就是这种结构的页面
那你切换的时候 可以把事件 trigger给页面,页面更新列表数据呗
我想写一个通用的tab切换组件,控制tab页的显示与隐藏,因为要显示的页面结构不一样,所以tab切换组件中是不需要负责渲染的,具体的渲染数据到节点上是在引用tab组件的页面中进行的,也就是用slot
恩,那其实切换tab页的逻辑还是需要在页面上进行了,无法通过一个组件进行。
思路很多啊,比如
navBar用 fixed定位到顶部,列表内容不用slot,完全和navbar独立
xxPage.wxml:
<navBar bindxxevent="updateList"></navBar>
<view wx:for="{{list}}"></view>
navBar.js:
点击事件: function(){
this.triggerEvent('xxevent',xxx,xxx)
}