评论

微信小程序使用ui组件库的tabbar组件如何实现跳转

在百度也没找到合适的方法,所以写了这篇文,真的希望能帮助到大家。

之前一直都是用原生的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(挺简单的),很少发文有问题请指出,写的不好请见谅,ps:下次好好码字写个与后台交互实现的picker自定义二级联动。

点赞 4
收藏
评论

2 个评论

  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2019-12-10








    2019-12-10
    赞同 1
    回复 2
  • 埃克斯
    埃克斯
    01-02

    为什么不显示导航图片

    01-02
    赞同
    回复 3
    • 埃克斯
      埃克斯
      01-02
      图标加到哪个文件夹中??
      01-02
      回复
    • CocaColaWithTea
      CocaColaWithTea
      01-02回复埃克斯
      你可以先去看看iview weapp组件库的tabbar组件,看完再来问
      01-02
      回复
    • CocaColaWithTea
      CocaColaWithTea
      01-09回复埃克斯
      图标是不用加到文件夹里的,是ui组件库里的东西,直接引用就行
      01-09
      回复
登录 后发表内容