mpvue开发微信小程序（4）—— van-nav-bar

NavBar 导航栏

1、接入

"usingComponents": {
  "van-nav-bar": "/static/vant-weapp/nav-bar/index"
}

2、显示

<van-nav-bar
  title="标题"
  left-text="左边按钮"
  @click-left="clickLeft"
/>

3、方法响应

<script>
export default {
  methods: {
    clickLeft () {
      // click left button on navigation bar
    }
  }
}
</script>

注：然后，这样无法触发方法clickLeft

4、修改Vant Weapp源码

/static/vant-weapp/nav-bar/index.js文件中

methods: {
  onClickLeft() {
    this.$emit('click-left');
  },
  onClickRight() {
    this.$emit('click-right');
  }
}

修改为：

methods: {
  onClickLeft() {
    this.$emit('clickLeft');
  },
  onClickRight() {
    this.$emit('clickRight');
  }
}

页面代码修改为：

<van-nav-bar
  title="标题"
  left-text="左边按钮"
  @clickLeft="clickLeft"
/>

参考资料：

扫描二维码关注公众号，回复： 9351786 查看本文章

https://youzan.github.io/vant-weapp/#/nav-bar

https://www.jianshu.com/p/2adff147b8a6