阅读 26

小程序自定义tabbar

微信小程序自定义tabbar

 

1.介绍微信自带的tabbar已经无法满足我们的需求了,往往我们需要自定义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>




<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会有短暂的闪烁,所有上面的写法是最美的解决方法了 

*/

 

原文:https://www.cnblogs.com/zxuedong/p/12910055.html

文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐