收藏
回答

做一个通用navBar组件中遇到的问题

不知道如何分类,因为我觉得这个问题更多其实算是整体框架的一种局限,不一定能解决,但还是想问问。
问题场景:在我的小程序中,会经常性的有那种上边是navBar栏,然后点击切换对应的页面(多是列表)。然后我就想写一个通用的组件,这样就不用每次都写点击切换控制显示隐藏的处理,因为这个逻辑是通用的。
问题表现:但是在我实际写组件的时候遇到了一个问题,就是具体控制列表渲染的应该是在页面中进行的,组件只负责点击显示或隐藏某个navBarItem的列表,用slot并不能满足我的需求,因为这个navBar列表数量不一致,而且也无法在组件中控制slot的显示与隐藏。
不知道各位有比较好的建议没

回答关注问题邀请回答
收藏

1 个回答

  • 卢霄霄
    卢霄霄
    2019-02-18

    没懂你具体问题是啥。。说下我觉得可能用的到的方法吧

    1、可以传递方法名字到组件里,组件里可以用getCurrentPages拿到当前页面实例去调用页面的方法

    2、页面里能用 this.selectComponent拿到组件的实例,调用组件实例的方法

    3、组件的属性能有observer属性,在属性被父页面修改后触发

    2019-02-18
    有用
    回复 12
    • &|!🤗
      &|!🤗
      2019-02-18

      就是这种结构的页面

      2019-02-18
      回复
    • 卢霄霄
      卢霄霄
      2019-02-18回复&|!🤗

      那你切换的时候 可以把事件 trigger给页面,页面更新列表数据呗

      2019-02-18
      回复
    • &|!🤗
      &|!🤗
      2019-02-18

      我想写一个通用的tab切换组件,控制tab页的显示与隐藏,因为要显示的页面结构不一样,所以tab切换组件中是不需要负责渲染的,具体的渲染数据到节点上是在引用tab组件的页面中进行的,也就是用slot

      2019-02-18
      回复
    • &|!🤗
      &|!🤗
      2019-02-18回复卢霄霄

      恩,那其实切换tab页的逻辑还是需要在页面上进行了,无法通过一个组件进行。

      2019-02-18
      回复
    • 卢霄霄
      卢霄霄
      2019-02-18回复&|!🤗

      思路很多啊,比如

      navBar用 fixed定位到顶部,列表内容不用slot,完全和navbar独立

      xxPage.wxml:

      <navBar bindxxevent="updateList"></navBar>

      <view wx:for="{{list}}"></view>


      navBar.js:

      点击事件: function(){

          this.triggerEvent('xxevent',xxx,xxx)

      }

      2019-02-18
      回复
    查看更多(7)
登录 后发表内容