之前一直都是用原生的tabbar但是自己使用的图标实在是太丑了，同时也想使用其他好看ui组件库做开发，我选用的是iview-weapp(直男审美)，今天主要说的是tabbar组件，首先使用方法也很简单在github链接https://github.com/TalkingData/iview-weapp把这个ui组件库下载下来，再把dist文件引入自己的项目中(dist文件跟pages文件同级)，好的这样就能使用iview-weapp组件库啦，接下来我们需要用到什么组件就在页面对应的.json文件里按需引入就可以了，下面我使用tabbar组件当个例子（建议打开这个链接https://weapp.iviewui.com/docs/guide/start看着文档操作） [图片] 然后我们在wxml文件里这样引用 [图片] 当然仅仅这样肯定还是不行的，我们还需要在js文件里这样写 [图片] 这个是默认值，默认选中的是第一个tabbar-item [图片] 这个是点击tabbar-item的时候获得选中的状态 好的这样我们项目里tabbar就能正常使用了但是问题来了，为啥文档没告诉我怎么跳转啊 [图片] 这也太难受了，百度了好久也没找到答案(这也是我写这个文章的目的，希望能帮助到大家)然后我就去看了微信小程序的开发文档https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html，看到Component 构造器这个东西貌似可以帮助我解决这个问题(文档还是很强的，建议多看)，下面是解决方法： 首先我们需要在pages目录下创建一个component目录 [图片] 然后在component目录下创建三个用来跳转的子页面(名字自己看着取) [图片] 子页面对应的.json文件需要这样写 [图片] 子页面对应的js文件需要这样写 var app = getApp(); Component({ /* 开启全局样式设置 */ options: { addGlobalClass: true, }, /* 组件的属性列表 */ properties: { name: { type: String, value: ‘cost’ } }, /* 组件的初始数据 */ data: { }, /* 组件声明周期函数 */ lifetimes: { attached: function () { [代码]}, moved: function () { }, detached: function () { }, [代码] }, /* 组件的方法列表 */ methods: { } }) 然后子页面对应的wxml与wxss页面就写需要的样式就行了。 接下来我们要在我们放tabbar组件的index.wxml文件里这样写 [图片] 使用hidden来判断显示我们创建的子页面(组件) 当然我们也还要在index.json引入我们的三个子页面 [图片] 这样我们的tabbar跳转就完成啦 成功案例： [图片] [图片] [图片] 这样的跳转页面也不会闪烁一下哦，如果你使用其他ui组件库用同样的方法也可以实现tabbar跳转呢，也可以自己写一个自定义tabbar(挺简单的)，很少发文有问题请指出，写的不好请见谅。 对了有些小伙伴说就是加载首页数据的时候 另外两个页面的数据也提前渲染了，有些业务逻辑是点击其他页面的时候页面的数据会刷新，我就不放代码上来了。提供个思路：下面的菜单按钮是可以监听的，可以用监听来解决，文档里有(多看文档)。