0.前置安裝

步驟一 安裝 vant 組件庫

npm i @vant/weapp -S --production

下載完后要npm構建才能使用

步驟二 修改 app.json

將 app.json 中的 "style": "v2" 去除，小程序的新版基礎組件強行加上了許多樣式，難以覆蓋，不關閉將造成部分組件樣式混亂

步驟三 修改 project.config.json

開發(fā)者工具創(chuàng)建的項目，miniprogramRoot 默認為 miniprogram，package.json 在其外部，npm 構建無法正常工作。

需要手動在 project.config.json 內(nèi)添加如下配置，使開發(fā)者工具可以正確索引到 npm 依賴的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

注意： 由于目前新版開發(fā)者工具創(chuàng)建的小程序目錄文件結(jié)構問題，npm構建的文件目錄為miniprogram_npm，并且開發(fā)工具會默認在當前目錄下創(chuàng)建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置為’./'即可

步驟四 構建 npm

打開微信開發(fā)者工具，點擊 工具 -> 構建 npm，并勾選 使用 npm 模塊 選項，構建完成后，即可引入組件。

微信小程序用vant自定義tabbar并跳轉(zhuǎn)相應頁面

vant官網(wǎng)Tabbar部分 結(jié)合 微信小程序官網(wǎng)文檔

1. 配置信息

• 在 app.json 中的 tabBar 項指定 custom 字段，同時其余 tabBar 相關配置也補充完整。
• 所有 tab 頁的 json 里需聲明 usingComponents 項，也可以在 app.json 全局開啟。

示例：

{
 "tabBar": {
		"custom": true,
		"color": "#000000",
		"selectedColor": "#000000",
		"backgroundColor": "#000000",
		"list": [
			{
				"pagePath": "pages/home/home"
			},
			{
				"pagePath": "pages/my/my"
			},
			{
				"pagePath": "pages/setting/setting"
			}
		]
	},
   //全局組件配置 下面是vant的組件導入
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  },
}

2. 添加 tabBar 代碼文件

在根目錄下創(chuàng)建文件夾custom-tab-bar

文件名:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

我是修改為index了,也可以就用上面的

3. 編寫 tabBar 代碼

用自定義組件的方式編寫即可，該自定義組件完全接管 tabBar 的渲染。另外，自定義組件新增 getTabBar 接口，可獲取當前頁面下的自定義 tabBar 組件實例。

4 .tabbar頁面實現(xiàn)跳轉(zhuǎn)

4.1 在custom-tab-bar/index.wxml中:

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}"  >
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

4.2 在custom-tab-bar/index.js中

url要是相對應的文件位置,注意加 /

Component({
  data: {
    active: '0',
    list: [{
        icon: 'home-o',
        text: '主頁',
        name: 'home',
        url: '/pages/home/home'
      },
      {
        icon: 'search',
        text: '我的',
        name: 'my',
        url: '/pages/my/my'
      },  
      {
        icon: 'setting-o',
        text: '設置',
        name: 'setting',
        url: '/pages/setting/setting'
      }
    ]
  },

  methods: {
    onChange(event) {
      this.setData({
        active: event.detail
      });
      wx.switchTab({
        url: this.data.list[event.detail].url,
      });
    },

    init() {
      const page = getCurrentPages().pop();
      this.setData({
        active: this.data.list.findIndex(item => item.url === `/${page.route}`)
      });
    }
  }
});

4.3 注意要在pages中要有這些頁面,在app.json中配置

4.4 在每個頁面的onShow() 生命周期函數(shù)使用init函數(shù)

my頁面 setting頁面一樣要添加!

最后效果:
文章來源地址http://www.zghlxwxcb.cn/news/detail-815190.html

到了這里，關于微信小程序用vant自定義tabbar頁面并跳轉(zhuǎn)相應頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！