diff --git a/app.js b/app.js index 248db54..7dc7a55 100644 --- a/app.js +++ b/app.js @@ -1,79 +1,6 @@ //app.js App({ - onLaunch: function () { - this.hidetabbar(); - this.getSystemInfo(); - }, - //自己对wx.hideTabBar的一个封装 - hidetabbar() { - wx.hideTabBar({ - fail: function() { - setTimeout(function() { // 做了个延时重试一次,作为保底。 - wx.hideTabBar() - }, 500) - } - }); - }, - getSystemInfo: function() { - let t = this; - wx.getSystemInfo({ - success: function(res) { - t.globalData.systemInfo = res; - } - }); - }, - editTabbar: function() { - let tabbar = this.globalData.tabBar; - let currentPages = getCurrentPages(); - let _this = currentPages[currentPages.length - 1]; - let pagePath = _this.route; - (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath); - for (let i in tabbar.list) { - tabbar.list[i].selected = false; - (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true); - } - _this.setData({ - tabbar: tabbar - }); - }, globalData: { - systemInfo: null,//客户端设备信息 - tabBar: { - "color": "#727272", - "selectedColor": "#F46368", - "backgroundColor": "#ffffff", - "list": [ - { - "pagePath": "pages/index/index", - "iconPath": "/components/tabbarComponent/icons/home.png", - "selectedIconPath": "/components/tabbarComponent/icons/homeActive.png", - "text": "首页" - }, - { - "pagePath": "pages/insight/index", - "iconPath": "/components/tabbarComponent/icons/insight.png", - "selectedIconPath": "/components/tabbarComponent/icons/insightActive.png", - "text": "洞察" - }, - { - "pagePath": "pages/brandSearch/index", - "iconPath": "/components/tabbarComponent/icons/appSearch.png", - "selectedIconPath": "/components/tabbarComponent/icons/appSearchActive.png", - "text": "品牌搜索" - }, - { - "pagePath": "pages/varComm/index", - "iconPath": "/components/tabbarComponent/icons/varComm.png", - "selectedIconPath": "/components/tabbarComponent/icons/varCommActive.png", - "text": "对比" - }, - { - "pagePath": "pages/mine/index", - "iconPath": "/components/tabbarComponent/icons/mine.png", - "selectedIconPath": "/components/tabbarComponent/icons/mineActive.png", - "text": "我的" - } - ] - } + } -}) +}) \ No newline at end of file diff --git a/app.json b/app.json index 2b82fab..a8acf72 100644 --- a/app.json +++ b/app.json @@ -15,6 +15,7 @@ "navigationBarTextStyle": "black" }, "tabBar": { + "custom": true, "list": [{ "pagePath": "pages/index/index", "iconPath": "/components/tabbarComponent/icons/home.png", @@ -49,10 +50,11 @@ }, "sitemapLocation": "sitemap.json", "usingComponents": { - "ec-canvas": "../ec-canvas/ec-canvas", + "ec-canvas": "/ec-canvas/ec-canvas", "van-button": "@vant/weapp/button/index", "van-tabbar": "@vant/weapp/tabbar/index", - "van-tabbar-item": "@vant/weapp/tabbar-item/index" + "van-tabbar-item": "@vant/weapp/tabbar-item/index", + "tabbar": "/custom-tab-bar/index" } } \ No newline at end of file diff --git a/components/tabbarComponent/icon/icon_home.png b/components/tabbarComponent/icon/icon_home.png deleted file mode 100644 index 6fdb11a..0000000 Binary files a/components/tabbarComponent/icon/icon_home.png and /dev/null differ diff --git a/components/tabbarComponent/icon/icon_home_HL.png b/components/tabbarComponent/icon/icon_home_HL.png deleted file mode 100644 index e0d89d5..0000000 Binary files a/components/tabbarComponent/icon/icon_home_HL.png and /dev/null differ diff --git a/components/tabbarComponent/icon/icon_mine.png b/components/tabbarComponent/icon/icon_mine.png deleted file mode 100644 index 06d7264..0000000 Binary files a/components/tabbarComponent/icon/icon_mine.png and /dev/null differ diff --git a/components/tabbarComponent/icon/icon_mine_HL.png b/components/tabbarComponent/icon/icon_mine_HL.png deleted file mode 100644 index ba4e638..0000000 Binary files a/components/tabbarComponent/icon/icon_mine_HL.png and /dev/null differ diff --git a/components/tabbarComponent/icon/icon_release.png b/components/tabbarComponent/icon/icon_release.png deleted file mode 100644 index 198d950..0000000 Binary files a/components/tabbarComponent/icon/icon_release.png and /dev/null differ diff --git a/components/tabbarComponent/icons/appSearch.png b/components/tabbarComponent/icons/appSearch.png deleted file mode 100644 index 3a801c4..0000000 Binary files a/components/tabbarComponent/icons/appSearch.png and /dev/null differ diff --git a/components/tabbarComponent/icons/appSearchActive.png b/components/tabbarComponent/icons/appSearchActive.png deleted file mode 100644 index a74330b..0000000 Binary files a/components/tabbarComponent/icons/appSearchActive.png and /dev/null differ diff --git a/components/tabbarComponent/icons/home.png b/components/tabbarComponent/icons/home.png deleted file mode 100644 index afbf260..0000000 Binary files a/components/tabbarComponent/icons/home.png and /dev/null differ diff --git a/components/tabbarComponent/icons/homeActive.png b/components/tabbarComponent/icons/homeActive.png deleted file mode 100644 index 82e6aff..0000000 Binary files a/components/tabbarComponent/icons/homeActive.png and /dev/null differ diff --git a/components/tabbarComponent/icons/insight.png b/components/tabbarComponent/icons/insight.png deleted file mode 100644 index caa7c01..0000000 Binary files a/components/tabbarComponent/icons/insight.png and /dev/null differ diff --git a/components/tabbarComponent/icons/insightActive.png b/components/tabbarComponent/icons/insightActive.png deleted file mode 100644 index f269cfe..0000000 Binary files a/components/tabbarComponent/icons/insightActive.png and /dev/null differ diff --git a/components/tabbarComponent/icons/mine.png b/components/tabbarComponent/icons/mine.png deleted file mode 100644 index e79692e..0000000 Binary files a/components/tabbarComponent/icons/mine.png and /dev/null differ diff --git a/components/tabbarComponent/icons/mineActive.png b/components/tabbarComponent/icons/mineActive.png deleted file mode 100644 index 74fe2e1..0000000 Binary files a/components/tabbarComponent/icons/mineActive.png and /dev/null differ diff --git a/components/tabbarComponent/icons/varComm.png b/components/tabbarComponent/icons/varComm.png deleted file mode 100644 index 912792c..0000000 Binary files a/components/tabbarComponent/icons/varComm.png and /dev/null differ diff --git a/components/tabbarComponent/icons/varCommActive.png b/components/tabbarComponent/icons/varCommActive.png deleted file mode 100644 index d693004..0000000 Binary files a/components/tabbarComponent/icons/varCommActive.png and /dev/null differ diff --git a/components/tabbarComponent/icons/路径.png b/components/tabbarComponent/icons/路径.png deleted file mode 100644 index 07de3e4..0000000 Binary files a/components/tabbarComponent/icons/路径.png and /dev/null differ diff --git a/components/tabbarComponent/tabbar.js b/components/tabbarComponent/tabbar.js deleted file mode 100644 index ef13b7e..0000000 --- a/components/tabbarComponent/tabbar.js +++ /dev/null @@ -1,64 +0,0 @@ -// tabBarComponent/tabBar.js -const app = getApp(); -Component({ - /** - * 组件的属性列表 - */ - properties: { - tabbar: { - type: Object, - value: { - "backgroundColor": "#ffffff", - "color": "#979795", - "selectedColor": "#1c1c1b", - "list": [ - { - "pagePath": "pages/index/index", - "text": "首页", - "iconPath": "icons/home.png", - "selectedIconPath": "icons/homeActive.png", - }, - { - "pagePath": "pages/insight/index", - "text": "洞查", - "iconPath": "icons/insight.png", - "selectedIconPath": "icons/insightActive.png", - }, - { - "pagePath": "pages/brandSearch/index", - "text": "导航", - "iconPath": "icons/appSearch.png", - "selectedIconPath": "icons/appSearchActive.png", - "isSpecial": true, - }, - { - "pagePath": "pages/varComm/index", - "text": "对比", - "iconPath": "icons/varComm.png", - "selectedIconPath": "icons/varCommActive.png", - }, - { - "pagePath": "pages/mine/index", - "text": "我的", - "iconPath": "icons/mine.png", - "selectedIconPath": "icons/mineActive.png", - } - ] - } - } - }, - - /** - * 组件的初始数据 - */ - data: { - isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false - }, - - /** - * 组件的方法列表 - */ - methods: { - - } -}) diff --git a/components/tabbarComponent/tabbar.json b/components/tabbarComponent/tabbar.json deleted file mode 100644 index e8cfaaf..0000000 --- a/components/tabbarComponent/tabbar.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "component": true, - "usingComponents": {} -} \ No newline at end of file diff --git a/components/tabbarComponent/tabbar.wxml b/components/tabbarComponent/tabbar.wxml deleted file mode 100644 index 8a41c80..0000000 --- a/components/tabbarComponent/tabbar.wxml +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - {{item.text}} - - - - {{item.text}} - - - diff --git a/components/tabbarComponent/tabbar.wxss b/components/tabbarComponent/tabbar.wxss deleted file mode 100644 index f5b3694..0000000 --- a/components/tabbarComponent/tabbar.wxss +++ /dev/null @@ -1,63 +0,0 @@ -.tabbar_box{ - display: flex; - flex-direction: row; - justify-content: space-around; - position: fixed; - bottom: 0; - left: 0; - z-index: 999; - width: 100%; - height: 98rpx; - box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); -} -.tabbar_box.iphoneX-height{ - padding-bottom: 66rpx; -} -.middle-wrapper{ - position: absolute; - right: 310rpx; - bottom: 0; - background-color: #fff; - width: 120rpx; - height: 120rpx; - border-radius: 50%; - border-top: 2rpx solid #f2f2f3; -} -.middle-wrapper.iphoneX-height{ - bottom: 66rpx; -} -.tabbar_nav{ - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - font-size: 20rpx; - height: 100%; - position: relative; -} -.tabbar_icon{ - width: 56rpx; - height: 56rpx; -} -.special-wrapper{ - position: absolute; - left: 77rpx; - top: -36rpx; - width: 96rpx; - height: 96rpx; - border-radius: 50%; - border-top: 2rpx solid #f2f2f3; - background-color: #fff; - text-align: center; - box-sizing: border-box; - padding: 6rpx; -} -.special-wrapper .tabbar_icon{ - width: 84rpx; - height: 84rpx; -} -.special-text-wrapper{ - width: 56rpx; - height: 56rpx; -} \ No newline at end of file diff --git a/custom-tab-bar/index.js b/custom-tab-bar/index.js new file mode 100644 index 0000000..77d1cf0 --- /dev/null +++ b/custom-tab-bar/index.js @@ -0,0 +1,52 @@ + +Component({ + data: { + selected: 0,//当前选中的tab下标 + color: "#1E1E1E", + selectedColor: "#646464",//tabbar选中字体颜色 + list: [{ + "pagePath": "pages/index/index", + "iconPath": "/components/tabbarComponent/icons/home.png", + "selectedIconPath": "/components/tabbarComponent/icons/homeActive.png", + "text": "首页" + }, + { + "pagePath": "pages/insight/index", + "iconPath": "/components/tabbarComponent/icons/insight.png", + "selectedIconPath": "/components/tabbarComponent/icons/insightActive.png", + "text": "洞察" + }, + { + "pagePath": "pages/brandSearch/index", + "iconPath": "/components/tabbarComponent/icons/appSearch.png", + "selectedIconPath": "/components/tabbarComponent/icons/appSearchActive.png", + "text": "品牌搜索" + }, + { + "pagePath": "pages/varComm/index", + "iconPath": "/components/tabbarComponent/icons/varComm.png", + "selectedIconPath": "/components/tabbarComponent/icons/varCommActive.png", + "text": "对比" + }, + { + "pagePath": "pages/mine/index", + "iconPath": "/components/tabbarComponent/icons/mine.png", + "selectedIconPath": "/components/tabbarComponent/icons/mineActive.png", + "text": "我的" + } + ],//tabbar循环数据集 + }, + attached() { + }, + methods: { + switchTab(e) { + const data = e.currentTarget.dataset; + const url = data.path + this.setData({ + selected: data.index + }) + wx.switchTab({url}) + } + }, + }) + \ No newline at end of file diff --git a/custom-tab-bar/index.json b/custom-tab-bar/index.json new file mode 100644 index 0000000..7a23245 --- /dev/null +++ b/custom-tab-bar/index.json @@ -0,0 +1,4 @@ +{ + "component": true +} + \ No newline at end of file diff --git a/custom-tab-bar/index.wxml b/custom-tab-bar/index.wxml new file mode 100644 index 0000000..0091896 --- /dev/null +++ b/custom-tab-bar/index.wxml @@ -0,0 +1,7 @@ + + + + {{item.text}} + + + \ No newline at end of file diff --git a/custom-tab-bar/index.wxss b/custom-tab-bar/index.wxss new file mode 100644 index 0000000..5c6541c --- /dev/null +++ b/custom-tab-bar/index.wxss @@ -0,0 +1,69 @@ + + +/*重新样式*/ +.tab-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: flex; + box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.05); + box-sizing: content-box; + } + + .tab-bar-border { + background-color: rgba(0, 0, 0, 0.33); + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 1px; + transform: scaleY(0.5); + } + + .tab-bar-item { + flex: auto; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background: #fff; + height: 120rpx; + } + + .tab-bar-item.diy { + margin-top: 0!important; + background: transparent; + position: relative; + flex: inherit; + width: 134rpx; + } + + .tab-bar-item image { + width: 48rpx; + height: 48rpx; + overflow: initial; + } + + .tab-bar-item view { + font-size: 24rpx; + } + + .tab-bar-item image.diy { + position: absolute; + width: 134rpx; + height: 140rpx; + bottom: 25.6%; + z-index: 100; + } + + .tab-bar-item view.diy { + margin-top: 90rpx; + background: #fff; + width: 100%; + height: 100%; + padding-top: 58rpx; + z-index: 99; + } + \ No newline at end of file diff --git a/pages/index/index.json b/pages/index/index.json index d8785a2..dd22d4b 100644 --- a/pages/index/index.json +++ b/pages/index/index.json @@ -1,6 +1,5 @@ { "usingComponents": { - "tabbar": "../../components/tabbarComponent/tabbar" }, "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#006BFF", diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 903bcb5..76b35c9 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -14,5 +14,5 @@ - + \ No newline at end of file