• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序自定义tabbar

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

1.介绍微信自带的tabbar已经无法满足我们的需求了,往往我们需要自定义tabbar,请看代码

<!-- 首先在page下面创建home首页页面,只用来存放我们的tabbar -->

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item name="index" icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item name="search" icon="search">搜索页</van-tabbar-item>
  <van-tabbar-item name="shapping" icon="friends-o">商品页面</van-tabbar-item>
  <van-tabbar-item name="new" icon="setting-o">最新页面</van-tabbar-item>
</van-tabbar>


<!-- 放置tabbar的对应的组件,点击tabbar让对应的组件显示 -->

<view hidden="{{ active === 'index' ? false : true }}">
  <first-page></first-page>
</view>
<view hidden="{{ active === 'search' ? false : true }}">
  <search></search>
</view>
<view hidden="{{ active === 'shapping' ? false : true }}">
  <shapping></shapping>
</view>
<view hidden="{{ active === 'new' ? false : true }}">
  <new></new>
</view>

 

// 在home下的index.json中注册这些组件


{
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    "first-page": "/components/index/index",
    "search": "/components/search/index",
    "shapping": "/components/shapping/index",
    "new": "/components/new/index",
    "dong": "/components/dong/index"
  }
}


// home下的index.js

Page({

    data: {
        active: 'index',
    },

    // 点击之后重新设置路由
    onChange (event) {
        this.setData({
          active: event.detail
        })
    },

})



/*

还有一种方法就是在每个路由页面放置一个tabbar组件,控制管理交给全局
app.js去处理,但是这样的缺点就是在跳转路由的时候,tabbar会有短暂的闪烁,所有上面的写法是最美的解决方法了 

*/

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
H7-TOOL的LUA小程序教程第3期:使用LUA控制H7-TOOL的LCD简易界面设计 ...发布时间:2022-07-18
下一篇:
浅谈小程序运行机制发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap