資訊專欄INFORMATION COLUMN
摘要：這里不再多具體介紹，只添加一個小需求，點擊切換相關(guān)頁面，該頁面標(biāo)題要和一致，頁面內(nèi)容也和一致，用于說明效果正確實現(xiàn)。
官方文檔
效果圖：
實現(xiàn)底部Tab選項，只需要在項目根目錄下的app.json下修改
如圖：
------------------------------------------------------------------------------------------------------
先介紹一下app.json文件
默認(rèn)有兩個代碼塊： 1、pages 這里注冊了當(dāng)前小程序的所有頁面路徑 2、window 這里用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。 以上兩個詳細(xì)使用參考文檔，本文章不做介紹
我們看下app.json提供的另一個配置項：tabBar
tabBar提供一些公有的屬性對tab配置：
而針對每一個多帶帶的tab 也有一些屬性進行配置：
官方示意圖：
------------------------------------------------------------------------------------------------------
具體實現(xiàn)底部Tab功能：
設(shè)定一個需求，假設(shè)當(dāng)前我們有兩個tab,一個主頁，一個我的 ， 未選中灰黑色，選擇紅色。
一、在pages目錄下創(chuàng)建兩個目錄，并創(chuàng)建想要的js、json、wxml、wxss相關(guān)文件
名字隨意，這里舉例：home目錄（主頁Tab相關(guān)），mine目錄(我的Tab相關(guān))
二、在根目錄下新建一個目錄，取名images(隨意取)，用于存放圖片，這里tab需要使用
1、在阿里素材庫下載幾個，注意tab圖片需要下載點擊和未點擊兩種狀態(tài)下的圖片。
2、講圖片資源復(fù)制到自己建的用于存圖片的目錄下
三、app.json文件配置
1、在pages屬性中配置項目所有的頁面路徑，我們這個例子就兩個，home,mine
"pages":[ "pages/home/home", "pages/mine/mine" ]
2、添加tabBar 屬性 ， 定義一些狀態(tài)
根據(jù)文章前面部分講解，進行一些必要屬性的配置
"tabBar":{ "color": "#333333", "selectedColor": "#ff0000", "backgroundColor": "#fff", "list":[ { "pagePath":"pages/home/home", "text":"主頁", "iconPath":"images/home.png", "selectedIconPath":"images/home_selected.png" }, { "pagePath":"pages/mine/mine", "text":"我的", "iconPath": "images/mine.png", "selectedIconPath":"images/mine_selected.png" } ] }
{ "pages":[ "pages/home/home", "pages/mine/mine" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "tabBar":{ "color": "#333333", "selectedColor": "#ff0000", "backgroundColor": "#fff", "list":[ { "pagePath":"pages/home/home", "text":"主頁", "iconPath":"images/home.png", "selectedIconPath":"images/home_selected.png" }, { "pagePath":"pages/mine/mine", "text":"我的", "iconPath": "images/mine.png", "selectedIconPath":"images/mine_selected.png" } ] } }app.json
四、多帶帶頁面的配置
一個頁面包含js、hson、wxml、wxss等相關(guān)文件。
這里不再多具體介紹，只添加一個小需求，點擊tab切換相關(guān)頁面，該頁面標(biāo)題要和tab一致，頁面內(nèi)容也和tab一致，用于說明tab效果正確實現(xiàn)。
1、設(shè)置多帶帶頁面的頁面標(biāo)題，這個需求是在json文件中配置實現(xiàn)的。
主需要在多帶帶頁面路徑下的json文件中添加屬性：
官方文檔
2、在頁面中顯示與tab一致的文字
頁面內(nèi)容搭建（ui繪制代碼）是在多帶帶頁面路徑下的wxml文件中配置實現(xiàn)的。
官方文檔
--------------------------------------------------------------------------------------
小程序?qū)嵺`（一）：主頁tab選項實現(xiàn)
小程序?qū)嵺`（二）：swiper組件實現(xiàn)輪播圖效果
小程序?qū)嵺`（三）：九宮格實現(xiàn)及item跳轉(zhuǎn)
小程序?qū)嵺`（四）：動態(tài)控制組件的顯示/隱藏
小程序?qū)嵺`（五）：for循環(huán)綁定item的點擊事件
小程序?qū)嵺`（六）：view內(nèi)部組件排版
小程序?qū)嵺`（七）：頁面間傳值
小程序?qū)嵺`（八）：驗證碼倒計時功能
小程序?qū)嵺`（九）：返回到上一個界面并傳值回去
小程序?qū)嵺`（十）：textarea實現(xiàn)簡單的編輯文本界面
小程序?qū)嵺`（十一）：showModal的使用
小程序?qū)嵺`（十二）：七牛云上傳圖片
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2059.html
摘要：組件類似于中的，實現(xiàn)類似輪播圖的效果，相對于的實現(xiàn)起來更加方便，快捷。swiper組件類似于Android中的ViewPager，實現(xiàn)類似輪播圖的效果，相對于Android的Viewpager,swiper實現(xiàn)起來更加方便，快捷。 效果圖： 首先看下swiper支持的屬性： --------------------------------------------------------...
摘要：效果圖實現(xiàn)效果圖紅色線包含部分的九宮格效果，并附帶點擊時間。效果圖： 實現(xiàn)效果圖紅色線包含部分的九宮格效果，并附帶item點擊時間。 ------------------------------------------------------------------------------------------------------ 具體實現(xiàn)： 1、首先添加圖片資源文件 在...
摘要：本次需求其實就兩個邏輯輸入篩選項。當(dāng)發(fā)生改變時，重新渲染頁面首次進入頁面時，無任何篩選項。關(guān)于的一些，官方也有很棒的文檔寫在后面本文通過工作中的一個小需求，完成了一次的實踐，不過上述代碼依然有很多需要優(yōu)化的地方。 寫在前面 showImg(https://segmentfault.com/img/bVbpBgw?w=1000&h=563); 本文首發(fā)于公眾號：符合預(yù)期的CoyPan R...
摘要：初窺添加音樂到收藏最近列表歌詞滾動從一個開始微信開發(fā)者工具生成目錄如下主頁日志頁面工具大體為每一個即是一個頁面文件，每個頁面有一個文件規(guī)定描述頁面的這四個文件必須具有相同的路徑與文件名。 showImg(https://segmentfault.com/img/remote/1460000009405866);showImg(https://segmentfault.com/img/r...
閱讀 736·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6184·2021-11-29 11:00
