欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序開(kāi)發(fā)實(shí)戰(zhàn)（20）：TabBar導(dǎo)航 - 新聞資訊 - 云南小程序開(kāi)發(fā)|云南軟件開(kāi)發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開(kāi)發(fā)/軟件開(kāi)發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們?cè)谧非笃湟曈X(jué)表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營(yíng)銷(xiāo)的便利，運(yùn)營(yíng)的高效，讓網(wǎng)站成為營(yíng)銷(xiāo)工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >

微信小程序開(kāi)發(fā)實(shí)戰(zhàn)（20）：TabBar導(dǎo)航

發(fā)表時(shí)間：2021-1-11

發(fā)布人：葵宇科技

瀏覽次數(shù)：70

在很多App中，首頁(yè)的下方通常會(huì)出現(xiàn)3到5個(gè)TabBar按鈕，如圖1所示。通過(guò)這些按鈕，可以切換到不同的頁(yè)面。其實(shí)這也屬于導(dǎo)航的一種方式。

圖1 App中TabBar的效果

其實(shí)小程序可以用非常簡(jiǎn)單的方式來(lái)實(shí)現(xiàn)這個(gè)效果，這一切不需要編寫(xiě)一行JavaScript代碼?，F(xiàn)在準(zhǔn)備3個(gè)頁(yè)面，如果是新建的小程序工程，默認(rèn)會(huì)建立兩個(gè)頁(yè)面：index和logs，我們可以再建立一個(gè)page頁(yè)面（新加的頁(yè)面不要忘了在app.json文件中配置）。包含3個(gè)頁(yè)面的工程結(jié)構(gòu)如圖2所示。

圖2 工程目錄結(jié)構(gòu)

添加TabBar按鈕，只需在app.json文件中添加tabBar屬性即可，代碼如下：

{
   … …
   "tabBar": {
    "color": "#dddddd",                            //  未選中狀態(tài)按鈕文字的顏色
    "selectedColor": "#3cc51f",                   //  選中狀態(tài)按鈕文字的顏色
    "backgroundColor": "#ffffff",                 //  背景色
    "list": [{                                       //  該數(shù)組元素表示TabBar按鈕
      "pagePath": "pages/index/index",              //  當(dāng)前按鈕指向的頁(yè)面
      "iconPath": "../../images/face1.png",       //  未被選中時(shí)的按鈕圖像文件路徑
      "selectedIconPath": "../../images/face.png", //  被選中時(shí)的按鈕圖像文件路徑
      "text": "頁(yè)面1"
    }, {  
      "pagePath": "pages/logs/logs",                //  當(dāng)前按鈕指向的頁(yè)面
      "iconPath": "../../images/wechat.png",
      "selectedIconPath": "../../images/wechatHL.png",
      "text": "頁(yè)面2"
    }
    , {  
      "pagePath": "pages/page/page",                //  當(dāng)前按鈕指向的頁(yè)面
      "iconPath": "../../images/wechat.png",
      "selectedIconPath": "../../images/wechatHL.png",
      "text": "頁(yè)面3"
    }
    ]
  }
}