• <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
      <nav id="xcyjv"></nav>
    1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>

        微信小程序自定義tabBar在uni-app的適配詳解

         更新時間:2019年09月30日 11:35:22   作者:醉月思   我要評論
        這篇文章主要介紹了微信小程序自定義tabBar在uni-app的適配詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
        引言:此方法可用作大部分微信小程序支持,但uni-app文檔中卻找不到相關說明的API

        需求

        需要在微信小程序中,實現一個中間圖標突出顯示的異形導航欄。

        如下圖

        實現方法設計

        要做這種異形的導航欄,用直接在配置文件里面寫list的方法肯定做不到。那么,就有以下兩種可替代方法。

        1. 在每一個頁面都加載一個tabBar組件,與頁面同時渲染。
        2. 設置自定義tabBar,修改tabBar的樣式。

        優缺點分析:方法1實現起來略為簡單,但是會出現代碼可重用率低,降低性能,已經界面跳動等問題。方法2則是微信官方提供的,自定義方式,相信在性能方面也會有很大的優勢。故選擇方法2。

        1. 查看文檔及官方Demo

        官方文檔

        簡要描述一下就是需要在根目錄中加入一個custom-tab-bar目錄,里面的文件結構與自定義組件的結構一致。然后再在小程序配置文件中修改tabbar為custom模式。

        官方代碼

        主要重點為三個部分

        配置文件

        custom-tab-bar目錄

        頁面生命周期中的設置索引方法

        這段代碼其實很容易理解,pageLifetimes就是監聽組件所在頁面的生命周期。上述代碼就是監聽頁面顯示。當頁面顯示后,獲取到tabBar的對象,然后再設置tabBar中的index索引。

        2. 遷移到uni-app框架

        上面的方法是使用微信小程序的開發方式,而我使用的是uni-app框架開發微信小程序的。所以我們需要把它們移植到uni-app框架內。

        配置文件的修改

        uni-app中,page.json被編譯為微信小程序的app.json。所以,我們直接修改page.json

        custom-tab-bar目錄的適配

        我們知道,uni-app使用的是類Vue開發,將一個Vue文件編譯為四個微信頁面文件(wxml,wxss,json,js)。那么,是否可以直接寫一個custom-tab-bar.vue的文件呢?剛開始我也是這么想的,后來發現uni-app只會編譯page目錄和component目錄下的vue文件。而微信小程序要求custom-tab-bar必須在項目的根目錄下。那么就只能在uni-app下創建一個custom-tab-bar目錄,并老老實實寫微信四件套了。

        寫完后,uni-app會將該目錄完美的復制至微信小程序項目的根目錄。

        tab頁面內的適配方法

        這個在我實際開發中,是最令我頭痛的了。因為微信小程序的this引用與uni-app的this引用并不相同。所以如果直接復制代碼是會編譯出錯的。而另一個問題則是,uni-app并未提供pageLifetimes的事件監聽。

        在我經過一番摸索之后,發現將設置索引方法寫在onShow事件里面,效果是等效的。接下來便只剩下this的問題了。

        如果直接復制的話,會出現無任何效果的情況

        因為uni-app的this引用不一樣,所以它在判斷getTabBar的時候,獲取的是“undefined”所以不會執行下面的操作。如果你將判斷去掉,則會直接報“undefined”錯誤。

        難道實現不了?其實不然,萬變不離其宗。uni-app也是編譯到小程序的,所以絕對有跡可循。

        我們首先看看uni-app里面this的內容。

        我們可以很明顯的看到里面有個$mp的對象,說明這應該是微信小程序專用的對象。接下來我們繼續分析$mp。

        這里面有一個隱藏很深的getTabBar方法,我們直接調用它,和在微信小程序里面調用this.getTabBar是等效的。

        所以我們就可以把onShow里面的內容寫成這樣。

        一些優雅點的封裝

        設置索引方法獨立出來

        在methods對象中,添加

        setTabBarIndex(index){
              if (typeof this.$mp.page.getTabBar === 'function' &&
                this.$mp.page.getTabBar()) {
                this.$mp.page.getTabBar().setData({
                  selected:index
                })
              }
            }

        使用mixin避免重復書寫復制

        main.js中,添加

        Vue.mixin({
          methods:{
            setTabBarIndex(index){
              if (typeof this.$mp.page.getTabBar === 'function' &&
                this.$mp.page.getTabBar()) {
                this.$mp.page.getTabBar().setData({
                  selected:index
                })
              }
            }
          }
        })

        混入后的使用

        在頁面文件中

        onShow() {
              this.setTabBarIndex(0) //index為當前tab的索引
            }

        以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

        相關文章

        最新評論

        01彩票网app
      1. <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
          <nav id="xcyjv"></nav>
        1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>
            四平 | 南充 | 安庆 | 三门峡 | 新乡 | 海丰 | 吴忠 | 天门 | 临沧 | 松原 | 昭通 | 崇左 | 郴州 | 宁波 | 山东青岛 | 黔东南 | 盐城 | 商洛 | 朝阳 | 台湾台湾 | 汉中 | 聊城 | 宜都 | 曹县 | 凉山 | 靖江 | 瓦房店 | 锡林郭勒 | 益阳 | 安顺 | 齐齐哈尔 | 琼中 | 盘锦 | 宿州 | 益阳 | 陕西西安 | 文山 | 萍乡 | 贺州 | 信阳 | 本溪 | 瓦房店 | 晋江 | 嘉善 | 鞍山 | 楚雄 | 襄阳 | 惠东 | 桓台 | 海南 | 诸城 | 海西 | 聊城 | 澄迈 | 承德 | 昌都 | 枣庄 | 营口 | 南京 | 淮北 | 肥城 | 衡阳 | 克孜勒苏 | 盘锦 | 神农架 | 博尔塔拉 | 济南 | 烟台 | 遵义 | 馆陶 | 余姚 | 阿拉尔 | 梧州 | 日喀则 | 清徐 | 鹤岗 | 常州 | 万宁 | 洛阳 | 平潭 | 大庆 | 秦皇岛 | 内蒙古呼和浩特 | 定西 | 广西南宁 | 东营 | 安阳 | 渭南 | 山西太原 | 抚州 | 昌吉 | 邵阳 | 泸州 | 兴化 | 大兴安岭 | 漳州 | 武威 | 铜仁 | 新疆乌鲁木齐 | 南充 | 内江 | 丽水 | 江门 | 乐平 | 玉溪 | 辽源 | 瓦房店 | 柳州 | 那曲 | 海东 | 济宁 | 如东 | 六安 | 姜堰 | 中卫 | 延安 | 海东 | 荣成 | 吉林 | 大丰 | 宜昌 | 吉林 | 天长 | 惠东 | 台南 | 桐乡 | 白沙 | 崇左 | 韶关 | 嘉峪关 | 衡水 | 崇左 | 巴音郭楞 | 迁安市 | 河池 | 定西 | 兴安盟 | 商洛 | 泰州 | 明港 | 宜昌 | 恩施 | 荆门 | 乌海 | 阿拉善盟 | 陇南 | 瓦房店 | 江苏苏州 | 石嘴山 | 北海 | 燕郊 | 吐鲁番 | 宿迁 | 泗阳 | 宁波 | 邯郸 | 汕头 | 宝鸡 | 鸡西 | 平顶山 | 黄山 | 朝阳 | 厦门 | 百色 | 中山 | 三河 | 安岳 | 清徐 | 长兴 | 任丘 | 台中 | 益阳 | 贺州 | 宝应县 | 莒县 | 双鸭山 | 牡丹江 | 安岳 | 邢台 | 固原 | 齐齐哈尔 | 绥化 | 莒县 | 邵阳 | 吉安 | 连云港 | 温岭 | 吴忠 | 泸州 | 张家口 | 台北 | 余姚 | 广西南宁 | 绍兴 | 玉树 | 西双版纳 | 石河子 | 阿勒泰 | 贵港 | 舟山 | 阿克苏 | 宁波 | 岳阳 | 茂名 | 天门 | 济源 | 黑河 | 泰州 | 嘉峪关 | 和县 | 喀什 | 济源 | 建湖 | 商丘 | 平顶山 | 酒泉 | 定西 | 陕西西安 | 南安 | 黄石 | 张家界 | 玉林 | 保定 | 玉林 | 大庆 | 辽宁沈阳 | 河池 | 桐乡 | 吉林 | 河北石家庄 | 青州 | 韶关 | 海安 | 莱州 | 新沂 | 黔西南 | 遵义 | 诸暨 | 巴音郭楞 | 辽宁沈阳 | 泰安 | 济宁 | 运城 | 宁国 | 龙岩 | 襄阳 | 铜陵 | 南京 | 图木舒克 | 锦州 | 临夏 | 黔南 | 溧阳 | 陕西西安 | 贺州 | 吉林长春 | 灵宝 | 郴州 | 锦州 | 阿勒泰 | 廊坊 | 天长 | 周口 | 乐平 | 株洲 | 周口 | 济源 | 四川成都 | 绍兴 | 单县 | 惠州 | 兴化 | 章丘 | 靖江 | 诸城 | 长治 | 嘉峪关 | 周口 | 白城 | 滕州 | 桓台 | 六安 | 泸州 | 桐城 | 宜都 | 泰州 | 三门峡 | 馆陶 | 玉溪 | 包头 | 海丰 | 湛江 | 塔城 | 昌吉 | 晋城 | 丹阳 | 陇南 | 永新 | 梧州 | 张家界 | 台北 | 新乡 | 百色 | 丹阳 | 马鞍山 | 湘西 | 大连 | 吐鲁番 | 西藏拉萨 | 偃师 | 淄博 | 莒县 | 台南 | 潜江 | 韶关 | 新乡 | 延安 | 潮州 | 克拉玛依 | 平凉 | 巴彦淖尔市 | 台南 | 澳门澳门 | 商丘 | 德清 | 清远 | 阿拉善盟 | 乐清 | 莒县 | 广西南宁 | 曲靖 | 定西 | 镇江 | 绵阳 | 忻州 | 贺州 | 辽阳 | 云南昆明 | 阿拉尔 | 延边 | 宁国 | 定西 | 廊坊 | 东方 | 克拉玛依 | 衡水 | 灌南 | 五指山 | 湖南长沙 | 玉环 | 常德 | 泰州 | 崇左 | 鹤岗 | 石河子 | 乌兰察布 | 泗洪 | 阳泉 | 库尔勒 | 来宾 | 安岳 | 武威 | 松原 | 图木舒克 | 毕节 | 石嘴山 | 蚌埠 | 屯昌 | 朝阳 | 北海 | 邹平 | 如皋 | 梅州 | 和县 | 庄河 | 新乡 | 株洲 | 丽江 | 自贡 | 桐城 | 淮北 | 东营 | 新疆乌鲁木齐 | 阿拉善盟 | 肇庆 | 建湖 | 巴中 | 承德 | 忻州 | 新余 | 石嘴山 | 桐乡 | 平顶山 | 扬中 | 防城港 | 自贡 | 广安 | 江西南昌 | 内蒙古呼和浩特 | 陇南 | 柳州 | 永新 | 九江 | 洛阳 | 石狮 | 三沙 | 宁国 | 大丰 | 慈溪 | 驻马店 | 保定 | 云浮 | 惠州 | 扬中 | 西双版纳 | 安阳 | 莒县 | 巢湖 | 乐平 | 江门 | 玉溪 | 苍南 | 蚌埠 | 赵县 | 长治 | 保定 | 石嘴山 | 大庆 | 鹤壁 | 昆山 | 天水 | 六安 | 百色 | 东海 | 包头 | 临汾 | 灵宝 | 乌海 | 镇江 | 阿拉善盟 | 盘锦 | 宜昌 | 阿拉尔 | 定安 | 大兴安岭 | 陕西西安 | 任丘 | 红河 | 临海 | 章丘 | 诸暨 | 铜川 | 芜湖 | 六盘水 | 那曲 | 宁波 | 枣庄 | 琼中 | 葫芦岛 | 大丰 | 绵阳 | 吐鲁番 | 塔城 | 阿拉善盟 | 凉山 | 乐山 | 宁国 | 马鞍山 | 福建福州 | 渭南 | 湘潭 | 吐鲁番 | 石狮 | 娄底 | 宁波 | 宝鸡 | 白城 | 大庆 | 莆田 | 钦州 | 延安 | 平潭 | 丽水 | 宁夏银川 | 宜昌 | 正定 | 溧阳 | 南充 | 南阳 | 白城 | 洛阳 | 鄂州 | 晋中 | 河南郑州 | 如皋 | 柳州 | 邹城 | 衡水 | 黔南 | 安徽合肥 | 乐山 | 三亚 | 泰州 | 眉山 | 鄂尔多斯 | 慈溪 | 本溪 | 湘西 | 永康 | 阜阳 | 仁怀 | 吉林 | 海丰 | 德宏 | 荆州 | 咸宁 | 芜湖 | 怀化 | 淮安 | 江门 | 梅州 | 那曲 | 佳木斯 | 赤峰 | 霍邱 | 宜昌 | 定西 | 渭南 | 汉川 | 安徽合肥 | 泸州 | 怒江 | 巴中 | 衡阳 | 自贡 | 景德镇 | 张家口 | 牡丹江 | 高密 | 黄石 | 义乌 | 承德 | 琼海 | 高雄 | 定安 | 白沙 | 亳州 | 鹰潭 | 咸宁 | 如东 | 白沙 | 乌海 | 开封 | 瓦房店 | 金昌 | 阿克苏 | 山南 | 黄石 | 蓬莱 | 黔南 | 达州 | 宿迁 | 宝鸡 | 清徐 | 海南 | 天水 | 山南 | 宝应县 | 靖江 | 包头 | 攀枝花 | 五家渠 | 四川成都 | 湘潭 | 泰安 | 库尔勒 | 乐平 | 抚顺 | 宿州 | 保定 | 景德镇 | 长治 | 河源 | 安徽合肥 | 曲靖 | 义乌 | 平凉 | 驻马店 | 保山 | 江西南昌 | 台北 | 吉安 | 靖江 | 阳江 | 陇南 | 石嘴山 | 灌南 | 兴安盟 | 文昌 | 中山 | 那曲 | 运城 | 黑龙江哈尔滨 | 汕尾 | 桓台 | 五指山 | 武威 | 三沙 | 儋州 | 茂名 | 五家渠 | 神木 | 黄冈 | 辽源 | 宿州 | 广饶 | 商洛 | 包头 | 大同 | 招远 | 包头 | 阿克苏 | 鞍山 | 桂林 | 梅州 | 大丰 | 七台河 | 宁波 | 普洱 | 河北石家庄 | 渭南 | 常德 | 三沙 | 临汾 | 白沙 | 玉林 | 赣州 | 石狮 | 文山 | 永康 | 濮阳 | 昌吉 | 吐鲁番 | 吉安 | 龙岩 | 图木舒克 | 衡水 | 包头 | 五指山 | 甘肃兰州 | 武威 | 海东 | 泰安 | 洛阳 | 博尔塔拉 | 日土 | 莱州 | 青海西宁 | 鹤岗 | 普洱 | 灌云 | 三门峡 | 滁州 | 靖江 | 吉林 | 东莞 | 崇左 | 威海 | 寿光 | 喀什 | 张家口 | 山东青岛 | 澳门澳门 | 黔西南 | 吕梁 | 无锡 | 泰州 | 随州 | 舟山 | 邯郸 | 池州 | 石嘴山 | 锡林郭勒 | 兴安盟 | 山南 | 九江 | 嘉善 | 景德镇 | 威海 | 邹平 | 大兴安岭 | 晋城 | 绵阳 | 辽宁沈阳 | 枣庄 | 四川成都 | 三河 | 西藏拉萨 | 博尔塔拉 | 北海 | 灵宝 | 海拉尔 | 防城港 | 乌兰察布 | 十堰 | 阿勒泰 | 兴化 | 新疆乌鲁木齐 | 芜湖 | 承德 | 随州 | 江苏苏州 | 鹰潭 | 武安 | 唐山 | 海西 | 池州 | 三明 | 平潭 | 丽江 | 扬州 | 泗洪 | 简阳 | 深圳 | 任丘 | 克孜勒苏 | 郴州 | 单县 | 防城港 | 丹阳 | 海安 | 澳门澳门 | 楚雄 | 海拉尔 | 南阳 | 项城 | 单县 | 安徽合肥 | 天长 | 佛山 | 垦利 | 乳山 | 衢州 | 泗阳 | 通辽 | 唐山 | 黑河 | 芜湖 | 昆山 | 海南 | 平潭 | 阜新 | 台南 | 屯昌 | 淄博 | 五家渠 | 宿迁 | 黔西南 | 宁波 | 泸州 | 内江 | 菏泽 | 平潭 | 达州 | 白城 | 忻州 | 三河 | 包头 | 青海西宁 | 桐乡 | 湖州 | 甘南 | 单县 | 惠东 | 改则 | 潜江 | 汕头 | 博罗 | 张北 | 图木舒克 | 玉环 | 六安 | 苍南 | 湖南长沙 | 中山 | 德阳 | 宜都 | 台中 | 随州 | 湖州 | 崇左 | 徐州 | 嘉善 | 佳木斯 | 吉林长春 | 宁波 | 通辽 | 三沙 | 孝感 | 海南海口 | 黄石 | 济南 | 禹州 | 咸阳 | 铁岭 | 安徽合肥 | 石狮 | 承德 | 雅安 | 扬中 | 和县 | 基隆 | 石嘴山 | 龙口 | 临沂 | 惠东 | 果洛 | 五家渠 | 海宁 | 吉林长春 | 六安 | 甘南 | 汕尾 | 台北 | 平潭 | 瑞安 | 平凉 | 泰州 | 浙江杭州 | 营口 | 益阳 | 宜都 | 澳门澳门 | 宜昌 | 七台河 | 三河 | 德阳 | 池州 | 沧州 | 曲靖 | 南阳 | 和县 | 肥城 | 阳春 | 大连 | 齐齐哈尔 | 清徐 | 鹤岗 | 遵义 | 滕州 | 焦作 | 宜昌 | 株洲 | 珠海 | 白城 | 河北石家庄 | 改则 | 赵县 | 临猗 | 安顺 | 海东 | 北海 | 攀枝花 | 佳木斯 | 洛阳 | 日喀则 | 锡林郭勒 | 衡阳 | 郴州 | 台北 | 佳木斯 | 如皋 | 泰安 | 鄂尔多斯 | 新沂 | 通辽 | 肇庆 | 商洛 | 禹州 | 广安 | 嘉兴 | 莆田 | 台南 | 景德镇 | 宁夏银川 | 如东 | 新泰 | 余姚 | 日喀则 | 德宏 | 克孜勒苏 | 盐城 | 兴化 | 黔南 | 玉树 | 内江 | 毕节 | 临沧 | 自贡 | 安徽合肥 | 湘西 | 伊春 | 洛阳 | 随州 | 公主岭 | 徐州 | 肥城 | 莒县 | 邢台 | 常州 | 绥化 | 丹阳 | 海安 | 泸州 | 平顶山 | 河源 | 正定 | 泗阳 | 湘潭 | 阿拉尔 | 三亚 | 灵宝 | 本溪 | 绵阳 | 汉中 | 鄂州 | 秦皇岛 | 丹东 | 池州 | 汕尾 | 庆阳 | 日喀则 | 高雄 | 宜都 | 廊坊 | 景德镇 | 五家渠 | 东莞 | 新余 | 邹城 | 河南郑州 | 绍兴 | 汉川 | 基隆 | 沭阳 | 鹰潭 | 厦门 | 四川成都 | 宁波 | 四川成都 | 新泰 | 伊春 | 永州 | 诸城 | 贵港 | 大兴安岭 | 慈溪 | 株洲 | 吉林长春 | 庆阳 | 日照 | 巴音郭楞 | 澄迈 | 怒江 | 海拉尔 | 阳泉 | 齐齐哈尔 | 巴彦淖尔市 | 金昌 | 宁波 | 遂宁 | 咸阳 | 大兴安岭 | 汕尾 | 阿勒泰 | 池州 | 乐平 | 林芝 | 泗阳 | 宜昌 | 如皋 | 琼海 | 阿拉尔 | 遵义 | 沛县 | 铜川 | 山东青岛 | 鞍山 | 烟台 | 灵宝 | 桐乡 | 阿坝 | 台湾台湾 | 邹城 | 定州 | 鹤壁 | 天门 | 泰安 | 扬州 | 崇左 | 鞍山 | 肥城 | 兴化 | 天水 | 任丘 | 余姚 | 湖北武汉 | 黑龙江哈尔滨 | 忻州 | 三门峡 | 济宁 | 兴安盟 | 桓台 | 孝感 | 沛县 | 文山 | 萍乡 | 大同 | 清远 | 钦州 | 图木舒克 | 六安 | 岳阳 | 义乌 | 澳门澳门 | 汝州 | 简阳 | 咸阳 | 昭通 | 阜阳 | 攀枝花 | 巴彦淖尔市 | 台山 | 邹城 | 宜春 | 涿州 | 大同 | 宝应县 | 台州 | 泰州 | 铁岭 | 乐平 | 海丰 | 日喀则 | 赣州 | 三河 | 湘潭 | 临沧 | 阿里 | 喀什 | 遂宁 | 赣州 | 泗阳 | 大同 | 那曲 | 青州 | 龙岩 | 三沙 | 如东 | 朝阳 | 舟山 | 大庆 | 瑞安 | 义乌 | 保亭 | 湖州 | 贵港 | 揭阳 | 霍邱 | 雅安 | 天水 | 那曲 | 莱芜 | 偃师 | 宜春 | 惠东 | 七台河 | 垦利 | 安吉 | 内江 |