首頁 微信小程式 小程式開發 小程式中的tabbar組件不顯示是什麼原因

小程式中的tabbar組件不顯示是什麼原因

Mar 03, 2021 am 09:50 AM
tabbar 小程式 組件

小程式中的tabbar組件不顯示是什麼原因

前言:

對於經常進行小程式開發的朋友來說,tabBar元件應該是大家非常熟悉的元件了。以為我對它已經很了解了,但是今天的遭遇才讓我徹底認清了它。今天如往常一樣開發小程序,但是意外地發現,我設定了tabBar卻沒有顯示,這是怎麼回事?於是抱著疑惑開始慢慢排查問題。

解決想法如下:

首先 如果tabBar不顯示,要檢查所指向的頁面是否進行了頁面註冊。如果沒有註冊的話,頁面是找不到的。

其次要確保路徑的拼字正確,不知道為什麼使用的Windows平台的微信開發工具,在設定tabBar的list時,並沒有程式碼提示,所以只能自己拼字路徑全稱,這個時候一定要注意拼字的正確性,否則頁面載入後,tabBar是找不到的,但是找不到Console也不會報任何的錯誤,所以千萬要注意路徑的拼寫,就像我在設定list 的pagePath 屬性時,將 「Component」 寫出了「Componnet」

最後,在頁面路徑確保正確的前提下,tabBar還是沒有顯示出來,嘗試了好多次,最後找到原因,因為之前是做Android的,而Android中,也有一個類似的元件是TabHost, TabHost包含在一個Activity中,包括指向的Activity(假設是3個Activity),共4個Activity,但是在微信小程式中,如果按照這樣的模式,即一個頁麵包含三個頁面的話,那麼很抱歉,tabBar是不能正常顯示的,在微信小程式中啟動頁面一定要包含在tabBar中,並且啟動頁必須是tabBar的list屬性中的第一個元素,才能正常顯示,Android的同學很容易在這個地方糾結。

相關推薦:小程式開發教學

以上是小程式中的tabbar組件不顯示是什麼原因的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何安裝Win10舊版元件DirectPlay 如何安裝Win10舊版元件DirectPlay Dec 28, 2023 pm 03:43 PM

不少用戶在玩win10的的一些遊戲的時候總是會遇到一些問題,比如說卡屏和花屏等等情況,這個時候我們是可以採用打開directplay這個功能來解決的,而且功能的操作方法也很簡單。 win10舊版元件directplay怎麼安裝1、在搜尋框裡面輸入「控制台」然後開啟2、檢視方式選擇大圖示3、找到「程式與功能」4、點選左側的啟用或關閉win功能5、選擇舊版這裡的勾選上就可以了

如何使用 Vue 實現日曆元件? 如何使用 Vue 實現日曆元件? Jun 25, 2023 pm 01:28 PM

Vue是一款非常流行的前端框架,它提供了許多工具和功能,如元件化、資料綁定、事件處理等,能夠幫助開發者建立出高效、靈活和易於維護的Web應用程式。在這篇文章中,我來介紹如何使用Vue實作一個日曆元件。 1.需求分析首先,我們需要分析這個行事曆組件的需求。一個基本的日曆應該具備以下功能:展示當前月份的日曆頁面;支援切換到前一月或下一月;支援點擊某一天,

實作微信小程式中的卡片翻轉特效 實作微信小程式中的卡片翻轉特效 Nov 21, 2023 am 10:55 AM

實作微信小程式中的卡片翻轉特效在微信小程式中,實現卡片翻轉特效是一種常見的動畫效果,可以提升使用者體驗和介面互動的吸引力。以下將具體介紹如何在微信小程式中實現卡片翻轉的特效,並提供相關程式碼範例。首先,需要在小程式的頁面佈局檔案中定義兩個卡片元素,一個用於顯示正面內容,一個用於顯示背面內容,具體範例程式碼如下:<!--index.wxml-->&l

支付寶上線「漢字拾光-生僻字」小程序,用於徵集、補充生僻字庫 支付寶上線「漢字拾光-生僻字」小程序,用於徵集、補充生僻字庫 Oct 31, 2023 pm 09:25 PM

本站10月31日消息,今年5月27日,螞蟻集團宣布啟動“漢字拾光計劃”,最近又迎來新進展:支付寶上線“漢字拾光-生僻字”小程序,用於向社會徵集生僻字,補充生僻字庫,同時提供不同的生僻字輸入體驗,以幫助完善支付寶內的生僻字輸入方法。目前,用戶搜尋「漢字拾光」、「生僻字」等關鍵字就可以進入「生僻字」小程式。在小程式裡,使用者可以提交尚未被系統辨識輸入的生僻字圖片,支付寶工程師確認後,將會對字庫進行補錄入。本站注意到,使用者也可以在小程式體驗最新的拆字輸入法,這項輸入法針對讀音不明確的生僻字設計。用戶拆

Angular元件及其顯示屬性:了解非block預設值 Angular元件及其顯示屬性:了解非block預設值 Mar 15, 2024 pm 04:51 PM

Angular框架中元件的預設顯示行為不是區塊級元素。這種設計選擇促進了元件樣式的封裝,並鼓勵開發人員有意識地定義每個元件的顯示方式。透過明確設定CSS屬性 display,Angular組件的顯示可以完全控制,從而實現所需的佈局和響應能力。

如何開啟win10舊版組件的設置 如何開啟win10舊版組件的設置 Dec 22, 2023 am 08:45 AM

win10舊版元件是需要使用者自己去設定裡面打開的,因為很多的元件平時都是預設關閉的狀態,首先我們需要進入到設定裡面,操作很簡單,跟著下面的步驟來就可以了win10舊版元件在哪裡開啟1、點選開始,然後點選「win系統」2、點選進入控制台3、再點選下面的程式4、點選「啟用或關閉win功能」5、在這裡就可以選擇你要的開啟了

uniapp如何實現小程式和H5的快速轉換 uniapp如何實現小程式和H5的快速轉換 Oct 20, 2023 pm 02:12 PM

uniapp如何實現小程式和H5的快速轉換,需要具體程式碼範例近年來,隨著行動網路的發展和智慧型手機的普及,小程式和H5成為了不可或缺的應用形式。而uniapp作為一個跨平台的開發框架,可以在一套程式碼的基礎上,快速實現小程式和H5的轉換,大大提高了開發效率。本文將介紹uniapp如何實現小程式和H5的快速轉換,並給出具體的程式碼範例。一、uniapp簡介unia

Vue元件開發:進度條元件實作方法 Vue元件開發:進度條元件實作方法 Nov 24, 2023 am 08:56 AM

Vue元件開發:進度條元件實作方法前言:在Web開發中,進度列是一種常見的UI元件,在資料要求、檔案上傳、表單提交等場景中常用來顯示作業的進度。在Vue.js中,透過自訂元件的方式,我們可以很方便地實作一個進度條元件,本文將介紹一種實作方法,並提供具體的程式碼範例。希望能對Vue.js初學者有幫助。組件的結構和樣式首先,我們需要定義進度條組件的基本結構和樣

See all articles