按官方封装tabbar

3 years ago · b2a4997abd
parent 8f08d0b56e
commit b2a4997abd
24 changed files with 164 additions and 53 deletions
--- a/app.js
+++ b/app.js
@ -2,8 +2,6 @@
 import fetch from './utils/request'
 App({
  onLaunch() {
-    // 隐藏原生的tabbar
-    wx.hideTabBar()
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
--- a/app.json
+++ b/app.json
@ -1,6 +1,5 @@
 {
  "pages": [
-    "pages/start/index",
    "pages/home/index",
    "pages/shequ/index",
    "pages/add/index",
@ -8,7 +7,8 @@
    "pages/mine/index",
    "pages/list/list",
    "pages/info/info",
-    "pages/intro/intro"
+    "pages/intro/intro",
+      "pages/start/index"
  ],
  "requiredPrivateInfos": [
    "getLocation",
@ -26,40 +26,27 @@
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
-   "custom":true,
+    "custom": true,
    "list": [
      {
      "pagePath": "pages/home/index",
-      "text": "营地",
-      "iconPath":"iamges/营地.png",
-      "selectedIconPath": "iamges/营地-变.png"
-  
+      "text": "营地"
     },
     {
      "pagePath": "pages/shequ/index",
-      "text": "社区",
-      "iconPath": "iamges/社区.png",
-      "selectedIconPath": "iamges/社区-变.png"
-
+      "text": "社区"
     },
     {
      "pagePath": "pages/add/index",
-      "text": "",
-      "iconPath": "iamges/新增.png"
+      "text": "发布"
     },    
     {
      "pagePath": "pages/activity/index",
-      "text": "活动",
-      "iconPath": "iamges/活动.png",
-      "selectedIconPath": "iamges/活动-变.png"
-
+      "text": "活动"
     },
     {
      "pagePath": "pages/mine/index",
-      "text": "我的",
-      "iconPath": "iamges/我的.png",
-      "selectedIconPath": "iamges/我的-变.png"
-
+      "text": "我的"
     }
   ]
  },
@ -69,9 +56,10 @@
    "van-icon": "@vant/weapp/icon/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-picker": "@vant/weapp/picker/index",
-    "my-tarBar":"/tabBar/index",
    "van-row": "@vant/weapp/row/index",
-    "van-col": "@vant/weapp/col/index"
+    "van-col": "@vant/weapp/col/index",
+    "van-tabbar": "@vant/weapp/tabbar/index",
+    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  },
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
--- a/custom-tab-bar/index.js
+++ b/custom-tab-bar/index.js
@ -0,0 +1,65 @@
+// custom-tab-bar/index.js
+import bit64Iamges from '../iamges/bit64.js'
+Component({
+  /**
+   * 组件的属性列表
+   */
+  options: {
+    styleIsolation: 'isolated'
+  },
+  properties: {
+    
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    active: null,
+    tabbarList:[
+      {
+        name:'营地',
+        path:'home',
+        defaultIcon:bit64Iamges[0].iconPath,
+        activeIcon:bit64Iamges[0].selectedIconPath
+      },
+      {
+        name:'社区',
+        path:'shequ',
+        defaultIcon:bit64Iamges[1].iconPath,
+        activeIcon:bit64Iamges[1].selectedIconPath
+       },
+      {
+        path:'add',
+        defaultIcon:bit64Iamges[2].iconPath
+      },
+      {
+        name:'活动',
+        path:'activity',
+        defaultIcon:bit64Iamges[3].iconPath,
+        activeIcon:bit64Iamges[3].selectedIconPath 
+      },
+      {
+        name:'我的',
+        path:'mine',
+        defaultIcon:bit64Iamges[4].iconPath,
+        activeIcon:bit64Iamges[4].selectedIconPath
+      },
+    ],
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    cilckSwitchTab(event) {
+      let path = event.currentTarget.dataset.path.path
+      // console.log(path)
+      if(path == 'add') return
+      wx.switchTab({
+        url: `/pages/${path}/index`,
+      })
+    },
+  }
+})
--- a/custom-tab-bar/index.json
+++ b/custom-tab-bar/index.json
@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/custom-tab-bar/index.wxml
+++ b/custom-tab-bar/index.wxml
@ -0,0 +1,9 @@
+<!--custom-tab-bar/index.wxml-->
+<view class="tabbar">
+    <view class="tabbar-item" wx:for="{{tabbarList}}" wx:key="index" bindtap="cilckSwitchTab" data-path="{{item}}">
+        <view class="tabbar-iocn" >
+          <image src="{{active == index? item.activeIcon:item.defaultIcon }}" mode="aspectFit"></image>
+        </view>
+        <view class="tabbar-title">{{item.name}}</view>
+    </view>
+</view>
--- a/custom-tab-bar/index.wxss
+++ b/custom-tab-bar/index.wxss
@ -0,0 +1,52 @@
+/* custom-tab-bar/index.wxss */
+.tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  /* height: 115rpx; */
+  background: #fff;
+  box-sizing: border-box;
+  padding-bottom: env(safe-area-inset-bottom);
+  display: flex;
+}
+.tabbar-item{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.tabbar-iocn{
+  height: 42rpx;
+  width: 42rpx;
+  margin:17rpx 0;
+}
+.tabbar-title{
+  font-size: 23rpx;
+  font-family: "Alibaba-PuHuiTi-Regular.otf";
+  font-weight: 400;
+  color: #636662;
+}
+.tabbar-iocn image{
+  height: 100%;
+  width: 100%;
+  display: block;
+}
+.tabbar-item:nth-child(3){
+ flex: 0.7;
+  position: relative;
+  background-color: white;
+  top: -30rpx;
+  border-radius: 50%;
+}
+.tabbar-item:nth-child(3) .tabbar-iocn{
+  width: 80%;
+  height: 80%;
+  margin: 0 ;
+  border-radius: 50%;
+}
+.tabbar-item:nth-child(3) .tabbar-iocn image{
+  height: 100%;
+  width: 100%;
+}
--- a/config/router.js
+++ b/config/router.js
--- a/iamges/我的-变.png
+++ b/iamges/我的-变.png
--- a/iamges/我的.png
+++ b/iamges/我的.png
--- a/iamges/新增.png
+++ b/iamges/新增.png
--- a/iamges/活动-变.png
+++ b/iamges/活动-变.png
--- a/iamges/活动.png
+++ b/iamges/活动.png
--- a/iamges/社区-变.png
+++ b/iamges/社区-变.png
--- a/iamges/社区.png
+++ b/iamges/社区.png
--- a/iamges/营地-变.png
+++ b/iamges/营地-变.png
--- a/iamges/营地.png
+++ b/iamges/营地.png
--- a/pages/activity/index.js
+++ b/pages/activity/index.js
@ -6,7 +6,6 @@ Page({
   * 页面的初始数据
   */
  data: {
-    activeIdx:3
  },

  /**
@ -27,6 +26,9 @@ Page({
   * 生命周期函数--监听页面显示
   */
  onShow() {
+    this.getTabBar().setData({
+      active:3
+    })
  },

  /**
--- a/pages/activity/index.wxml
+++ b/pages/activity/index.wxml
@ -1,3 +1,2 @@
 <!--pages/activity/index.wxml-->
 <text>待开发中....</text>
-<my-tarBar activeIdx="{{activeIdx}}"></my-tarBar>
--- a/pages/home/index.js
+++ b/pages/home/index.js
@ -291,19 +291,19 @@ Page({
    nowScale: 8.8,
    key: 'TYBBZ-A2AKV-MLZPW-UFNQI-HKNVE-BEFZH',
    style: 1,
-    activeIdx: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
+   
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'CECBZ-55LCW-TSYR7-O4UGV-75DE7-2JBQH',
    });
    this.getWeatherData()
-    // 请求面数据
+    // // 请求面数据
    this.getMian('nanjing')
  },
  getMapZuobiao(e) {
@ -577,6 +577,9 @@ Page({
   * 生命周期函数--监听页面显示
   */
  onShow() {
+    this.getTabBar().setData({
+      active:0
+    })
    var markers = this.data.pointMarkers.concat(this.data.shuMarkers)
    this.setData({
      markers: markers
--- a/pages/home/index.wxml
+++ b/pages/home/index.wxml
@ -61,5 +61,3 @@
  module.exports.getArr = getArr;
 </wxs>

-<!-- 底部导航条 -->
-<my-tarBar activeIdx="{{activeIdx}}"></my-tarBar>
--- a/pages/mine/index.js
+++ b/pages/mine/index.js
@ -6,7 +6,6 @@ Page({
   * 页面的初始数据
   */
  data: {
-    activeIdx:4
  },

  /**
@ -27,6 +26,9 @@ Page({
   * 生命周期函数--监听页面显示
   */
  onShow() {
+    this.getTabBar().setData({
+      active:4
+    })
  },

  /**
--- a/pages/mine/index.wxml
+++ b/pages/mine/index.wxml
@ -1,3 +1,2 @@
 <!--pages/mine/index.wxml-->
 <text>待开发中....</text>
-<my-tarBar activeIdx="{{activeIdx}}"></my-tarBar>
--- a/pages/shequ/index.js
+++ b/pages/shequ/index.js
@ -6,14 +6,13 @@ Page({
   * 页面的初始数据
   */
  data: {
-    activeIdx:1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
-
+  
  },

  /**
@ -27,6 +26,9 @@ Page({
   * 生命周期函数--监听页面显示
   */
  onShow() {
+    this.getTabBar().setData({
+      active:1
+    })
  },

  /**
--- a/pages/shequ/index.wxml
+++ b/pages/shequ/index.wxml
@ -1,3 +1,2 @@
 <!--pages/shequ/index.wxml-->
-<text>待开发中....</text>
-<my-tarBar activeIdx="{{activeIdx}}"></my-tarBar>
+<text>待开发中....</text>