站長資訊網
        最全最豐富的資訊網站

        手把手教你怎么實現微信小程序自定義底部導航欄

        微信小程序自定義底部導航欄怎么實現?下面本篇文章給大家介紹一下自定義底部導航欄的具體實現方法,希望對大家有所幫助!

        手把手教你怎么實現微信小程序自定義底部導航欄

        微信支持自定義導航欄來實現靈活的底部導航欄,在官方文檔中給出了簡單的描述,但不是太具體,這里我通過手把手的具體代碼實現,來幫助大家完成自定義底部導航欄的具體實現?!鞠嚓P學習推薦:小程序開發教程】

        引入colorui

        https://github.com/weilanwl/ColorUI

        訪問該網址,將colorui組件庫下載下來

        手把手教你怎么實現微信小程序自定義底部導航欄

        下載下來后,將demo文件夾中的colorui文件夾放入你的小程序項目中

        手把手教你怎么實現微信小程序自定義底部導航欄

        手把手教你怎么實現微信小程序自定義底部導航欄

        設置引入

        @import 'colorui/main.wxss'; @import 'colorui/icon.wxss'; @import 'colorui/animation.wxss';

        將上面這段代碼放入app.wxss文件中(上面代碼路徑根據自己實際路徑填寫

        colorui就引入成功了,我這里是使用colorui的樣式組件,其實用別的也一樣,或者自己寫底部導航欄的樣式都可以

        創建自定義底部導航欄組件

        我們首先創建一個自定義組件文件夾**custom-tab-bar,**切記,自定義底部導航欄的文件夾名必須是這個,不能改成別的,否則小程序是識別不了的。

        手把手教你怎么實現微信小程序自定義底部導航欄

        接著我們在Pages下面創建兩個頁面(home,my),用來當作導航欄的兩個切換頁面

        手把手教你怎么實現微信小程序自定義底部導航欄

        手把手教你怎么實現微信小程序自定義底部導航欄

        app.json文件設置

        不使用小程序默認的導航欄設置,就需要在app.json文件中設置tabBar的custom的屬性為true

        具體代碼如下:

        "tabBar": {     "custom": true,     "list": [       {         "pagePath": "pages/home/home",         "text": "首頁",         "iconPath": "images/icon/basics.png",         "selectedIconPath": "images/icon/basics_cur.png"       },       {         "pagePath": "pages/my/my",         "text": "我的",         "iconPath": "images/icon/component.png",         "selectedIconPath": "images/icon/component_cur.png"       }     ]   },

        在這里需要注意的是,list也是需要設置的,list中pagePath就配置你需要配置的tab具體頁面,這里我只設置了兩個tab,所以就配了兩個,配置了幾個就要在這配幾個,一個都不能少,list除了pagePath,其他字段可根據自己的需要進行增減。

        編寫導航欄具體代碼邏輯

        導航欄組件具體實現

        1、組件初始數據設置

        **// custome-tab-bar/index.js** /**    * 組件的初始數據    */   data: {     selected: 0,     list: [{         "pagePath": "/pages/home/home",         "text": "首頁",         "iconPath": "/images/icon/basics.png",         "selectedIconPath": "/images/icon/basics_cur.png"       },       {         "pagePath": "/pages/my/my",         "text": "我的",         "iconPath": "/images/icon/component.png",         "selectedIconPath": "/images/icon/component_cur.png"       }     ]   }

        這里可以看到和app.json中的設置大致差不多,但是真正的list數據其實取得是這里的,而不會去取app.json的,這就是實現自定義組件的關鍵,所以大家可能就有疑問,既然用不到app.json,為什么還要在app.json中設置,我這里查了下,這是小程序的規范要求,我們只能遵從。

        2、組件導航欄頁面代碼實現

        <!--custom-tab-bar/index.wxml--> <view class="cu-bar tabbar">   <view wx:for="{{list}}" wx:key="index" class="action" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">     <view class="cuIcon-cu-image">       <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>     </view>     <view class="text-green">{{item.text}}</view>   </view> </view>

        這里是使用的colorui的樣式,我們根據list每條數據的索引位與選中的值進行比較來做到按鈕的樣式切換效果,通過switchTab切換事件來實現tab頁的切換。

        3、組件切換事件代碼實現

        /**    * 組件的方法列表    */   methods: {     switchTab(e) {       const data = e.currentTarget.dataset       const url = data.path            wx.switchTab({         url       })       this.setData({         selected: data.index       })     }   }

        調用微信提供的wx.switchTab方法完成url跳轉,同時記錄當時選中的索引值。

        寫到這里我們的組件這塊的代碼就寫完了,接著具體頁面也要針對按鈕切換設置相應邏輯

        4、tab具體頁面代碼實現

        // pages/my/my.js /**    * 生命周期函數--監聽頁面顯示    */   onShow: function () {     console.log("onShow")     if (typeof this.getTabBar === 'function' && this.getTabBar()) {       this.getTabBar().setData({         selected: 1       })     }   },

        通過onShow的頁面生命周期函數來設置selected的值,因為我的頁面是第二個tab,所以索引值設置為1.自定義組件 微信有新增 getTabBar 接口,可獲取當前頁面下的自定義 tabBar 組件實例,就可以設置組件中selected的值。home頁面也是同樣的設置,索引值根據實際情況跳轉一下即可。

        最終效果呈現

        通過上面代碼的實現,整個自定義底部導航欄就實現了,其實整體實現還是比較簡單的。讓我們來看下效果

        手把手教你怎么實現微信小程序自定義底部導航欄

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产精品揄拍100视频| 精品久久久久久综合日本| 久久久久国产精品熟女影院| 国产精品久久久天天影视香蕉| 国产成人无码精品一区二区三区| 欧美亚洲另类精品第一页 | 国产AV午夜精品一区二区入口| 老年人精品视频在线| 91久久精品视频| 精品乱人伦一区二区三区| 国产精品熟女一区二区| 亚洲午夜精品久久久久久浪潮| 国产精品粉嫩美女在线观看| 国产精品臀控福利在线观看 | 国产福利微拍精品一区二区| 午夜天堂精品久久久久| 中文国产成人精品久久不卡| 久久精品无码免费不卡| 国产亚洲精品高清在线| 四虎精品成人免费观看| 国内精品久久久久影院免费| 国产人妖乱国产精品人妖| 久久久久久亚洲Av无码精品专口 | 亚洲精品成人网久久久久久| 欧美成人精品一区二区综合| 国产欧美精品区一区二区三区 | 无码人妻精品一区二区三区66| 四虎精品影库4HUTV四虎| 精品多毛少妇人妻AV免费久久| 99久久www免费人成精品| 久热这里只精品99re8久| 99精品视频在线观看re| 69堂国产成人精品视频不卡| 国产精品熟女一区二区| 91精品国产高清91久久久久久 | 污污网站国产精品白丝袜| 久久精品国产精品亚洲人人| 久久99精品国产麻豆婷婷| 久久99精品国产麻豆蜜芽| 欧美人与动牲交a欧美精品| 久久中文精品无码中文字幕|