微信小程序使用ui组件库的tabbar组件如何实现跳转
发布于 5 年前 作者 yiqiang 1196 次浏览 来自 分享

之前一直都是用原生的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自定义二级联动。

2 回复

为什么不显示导航图片

回到顶部