真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

微信小程序開發(fā)之自定義tabBar的實(shí)現(xiàn)-創(chuàng)新互聯(lián)

最近開發(fā)微信小程序,公司要求做一個(gè)類似閑魚的tabbar,但是網(wǎng)上大多資料的tabbar都會(huì)在頁(yè)面切換的時(shí)候重新渲染,所以我寫了一個(gè)不會(huì)重新渲染的tabbar,有需要的直接拿走不謝。https://github.com/SuRuiGit/wxapp-customTabbar

創(chuàng)新互聯(lián)公司是一家以成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、成都網(wǎng)站推廣、小程序App開發(fā)等移動(dòng)開發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為廣告制作等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。

在小程序的開發(fā)文檔中,對(duì)tabbar是這樣說明的:

如果小程序是一個(gè)多 tab 應(yīng)用(客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面),可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn),以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。

Tip:

1.當(dāng)設(shè)置 position 為 top 時(shí),將不會(huì)顯示 icon

2.tabBar 中的 list 是一個(gè)數(shù)組,只能配置最少2個(gè)、最多5個(gè) tab,tab 按數(shù)組的順序排序。

在實(shí)際開發(fā)過程中,小程序自帶的tabbar樣式并不能滿足設(shè)計(jì)提供的開發(fā)需求,所以需要我們自定義一套屬于自己的tabbar。


使用步驟如下:


第一步:找到項(xiàng)目中的tabbarComponent目錄,拷貝到你的工程中,然后將tabbarComponent->icon圖標(biāo)替換成你自己的tabbar圖片

第二步:到app.json中配置tabBar,這里我就不細(xì)說了,只強(qiáng)調(diào)閑魚的tabbar中間的按鈕是跳到二級(jí)頁(yè)面,所以不配置在tabBar的list中

第三步:在app.js的onLaunch方法中調(diào)用wx.hideTabBar();隱藏系統(tǒng)自帶的tabBar

第四步:在app.js中的globalData中加入自定義tabbar的參數(shù),再加入一個(gè)方法給tabBar.list配置中的頁(yè)面使用,代碼如下

globalData: {
  userInfo: null,
  tabBar: {
   "backgroundColor": "#ffffff",
   "color": "#979795",
   "selectedColor": "#1c1c1b",
   "list": [
    {
     "pagePath": "/page/index/index",
     "iconPath": "icon/icon_home.png",
     "selectedIconPath": "icon/icon_home_HL.png",
     "text": "首頁(yè)"
    },
    {
     "pagePath": "/page/myRelease/index",
     "iconPath": "icon/icon_release.png",
     "isSpecial": true,
     "text": "發(fā)布"
    },
    {
     "pagePath": "/page/mine/index",
     "iconPath": "icon/icon_mine.png",
     "selectedIconPath": "icon/icon_mine_HL.png",
     "text": "我的"
    }
   ]
  }
 }

當(dāng)前標(biāo)題:微信小程序開發(fā)之自定義tabBar的實(shí)現(xiàn)-創(chuàng)新互聯(lián)
標(biāo)題路徑:http://weahome.cn/article/egcjh.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部