求解一个关于mint-ui的tabbar页面之间切换触发事件的问题

1、各个tab-item之间的切换有没有什么触发事件。
例如:

<mt-tabbar v-model="selected">
  <mt-tab-item id="外卖">
    <img slot="icon" src="../assets/100x100.png">
    外卖
  </mt-tab-item>
  <mt-tab-item id="订单">
    <img slot="icon" src="../assets/100x100.png">
    订单
  </mt-tab-item>
  <mt-tab-item id="发现">
    <img slot="icon" src="../assets/100x100.png">
    发现
  </mt-tab-item>
  <mt-tab-item id="我的">
    <img slot="icon" src="../assets/100x100.png">
    我的
  </mt-tab-item>
</mt-tabbar>

这个段代码里,当我从外卖页面点击到订单页面,有没有什么触发事件。

我现在的疑问就是怎么实现点击到对应选卡项时候再加载对应页的数据。有没有什么触发事件

回答:

<mt-tabbar v-model=”selected”>
官方文档已经说明了,tabbar 有 value属性是 选中的项的id值。文档

选中的id:{{selected}}

<mt-tabbar v-model="selected">
  <mt-tab-item id="外卖">
    <img slot="icon" src="../assets/100x100.png">
    外卖
  </mt-tab-item>
  <mt-tab-item id="订单">
    <img slot="icon" src="../assets/100x100.png">
    订单
  </mt-tab-item>
  <mt-tab-item id="发现">
    <img slot="icon" src="../assets/100x100.png">
    发现
  </mt-tab-item>
  <mt-tab-item id="我的">
    <img slot="icon" src="../assets/100x100.png">
    我的
  </mt-tab-item>
</mt-tabbar>


data(){
    return { selected: '外卖'}
},
watch: {
    selected: function (val, oldVal) {
        // 这里就可以通过 val 的值变更来确定
        console.log(val)
    }
}

回答:

可以自己在item中设置click事件,事件触发时改变selected所绑定的值,这样tab就会切换

回答:

我今天也刚好用到 我是监听selected值的变化进行页面的跳转 肯定触发了点击事件。

回答:

怎么触发事件的

回答:

想问一下,我如果加了header,返回之后怎么更新tabbar的selected呢?

回答:

不用绑定事件,你只需要看<mt-tabbar v-model=”selected”>这里的selected的值,与你下面<mt-tab-item id=”外卖”>的id的值相对应就行,比如你this.selected=”外卖”,它就显示外卖子页面;假如是this.selected=”订单”,就显示订单的子页面,你只需要写一个methos去改变this.selected的值。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注