微信小程序中集成有赞UI自定义Tabbar组件

最新推荐文章于 2024-09-02 12:25:42 发布

秦时明月之安康

最新推荐文章于 2024-09-02 12:25:42 发布

阅读量960

点赞数 3

分类专栏：小程序文章标签：前端

本文链接：https://blog.csdn.net/lg993372246/article/details/108509447

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下载有赞小程序demo vant-weapp
在这里插入图片描述

打开app.json添加自定义tabBar

{
  "pages": [
    "pages/cart/index",
    "pages/goods/index",
    "pages/user/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/cart/index",
        "text": "购物车"
      },
      {
        "pagePath": "pages/goods/index",
        "text": "商品详情"
      },
      {
        "pagePath": "pages/user/index",
        "text": "会员中心"
      }
    ]
  },
  "usingComponents": {},
  "sitemapLocation": "sitemap.json"
}

项目根目录创建custom-tab-bar文件夹，再创建3个文件：index.json、index.wxml、index.js，
index.json代码如下，

{
  "component": true,
  "usingComponents": {
    "van-tabbar": "/miniprogram_npm/@vant/weapp/tabbar/index",
    "van-tabbar-item": "/miniprogram_npm/@vant/weapp/tabbar-item/index"
  }
}

index.wxml代码如下，

<van-tabbar active="{{ active }}" bind:change="onChange">
    <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
    <van-tabbar-item icon="search">商品详情</van-tabbar-item>
    <van-tabbar-item icon="friends-o">会员中心</van-tabbar-item>
</van-tabbar>

index.js代码如下，

Component({
  data: {
    active: 0, // 当前选中第几个tab
  },
  // 组件的方法列表
  methods: {
    onChange: function (event) {
      // event.detail是vant-app的tabbar组件选择的序号
      // 相当于获取点击van-tabbar-item的序号
      if (event.detail === 0) {
        this.switchTab("/pages/cart/index");
        // 设置选中
        this.setData({
          active: event.detail
        });
      } else if(event.detail === 1){
        this.switchTab("/pages/goods/index");
        // 设置选中
        this.setData({
          active: event.detail
        });
      } else {
        this.switchTab("/pages/user/index");
        // 设置选中
        this.setData({
          active: event.detail
        });
      }
    },
    // 自定义tab切换方法增加回调
    switchTab: function (url, callback) {
      if (callback) {
        callback();
      }
      // 调用微信的switchTab切换tabbar
      wx.switchTab({ url });
    }
  }
});