小程式首頁不顯示tabbar,而非首頁顯示tabbar的方法
阿新 • • 發佈:2018-11-20
很多新手在寫tabBar的時候會發現明明自己按照微信開發文件的示例寫的tabBar,但是卻不出自己想要的效果,這個我剛開始寫小程式的時候也遇到了同樣的問題,現在給大家講講我的解決方案
一般我們會在在專案的app.json使用以下程式碼,卻沒有如期望那樣在螢幕底部出現TabBar。
{ "pages":[ "pages/welcome/welcome", "pages/index/index", "pages/posts/posts", "pages/posts/post_detail/post_detail", "pages/movie/movie" ], "window": { "navigationBarBackgroundColor": "#405f80" }, "tabBar": { "color": "#000000", "borderStyle": "#000", "selectedColor": "#9999FF", "list": [ { "pagePath": "pages/index/index", "text": "首頁", "iconPath": "images/posts/wenzi1.png", "selectedIconPath": "images/posts/wenzi2.png" }, { "pagePath": "pages/posts/posts", "text": "美文", "iconPath": "images/posts/wenzi1.png", "selectedIconPath": "images/posts/wenzi2.png" }, { "pagePath": "pages/movie/movie", "text": "電影", "iconPath": "images/movie/movie1.png", "selectedIconPath": "images/movie/movie2.png" } ] }
卻沒有得到我們想要的效果,如下圖:
對於這個問題我呢找到了兩種解決方案,都是可行的
第一種解決方案主要是針對不想在小程式一進來的首頁展示tabBar,而是在進入歡迎頁面後才在底部展示個性選單,那麼首先你要在你的歡迎頁面的js頁面新增以上幾行程式碼
Page({
come_baby:function(event){
wx.switchTab({
url: '../index/index',
})
}
})
注:come_baby是我歡迎頁面的按鈕的事件名稱,點選按鈕觸發這個事件,小夥伴們可以改成自己喜歡的名字
新增完這幾行程式碼後我們可以得到如下效果:
這是歡迎頁面,點選“開啟小程式之旅”觸發“come_baby”事件
進入以後會顯示這樣的頁面
這也給了強迫症患者一個解決的方法啦,例如只想歡迎頁面乾乾淨淨對不對,反正我是啦!
方法二:那麼第二種方法就是在歡迎頁面就顯示個性選單,那這個需要怎麼設定呢,也很簡單,只需要一步即可完成
就是在app.json檔案中pages的第一條資料與tabBar裡list的第一個地址相對應即可
設定完這些就可以得到以下效果
怎麼樣,是不是很簡單,哈哈哈哈!~
---------------------
轉載自
作者:Wu_Xiao_Man
來源:CSDN
原文:https://blog.csdn.net/Wu_Xiao_Man/article/details/81841311