feat: 增加跳转功能 && 抽象三个tabbar的topbar为公共组件

mock/service.js

@@ -4,14 +4,14 @@ module.exports = {
     message:'success',
     data:{
       service:[
-        {image:'/../images/image.png',name:'微信',type:'weixin'},
-        {image:'/../images/image(1).png',name:'QQ',type:'QQ'},
-        {image:'/../images/image(2).png',name:'腾讯文档',type:'document'},
-        {image:'/../images/image(3).png',name:'腾讯地图',type:'map'},
-        {image:'/../images/image(4).png',name:'数据中心',type:'data'},
-        {image:'/../images/image(4).png',name:'数据中心',type:'data'},
-        {image:'/../images/image(4).png',name:'数据中心',type:'data'},
-        {image:'/../images/image(4).png',name:'数据中心',type:'data'},
+        {image:'/../images/image.png',name:'微信',type:'weixin', url: ''},
+        {image:'/../images/image(1).png',name:'QQ',type:'QQ', url: ''},
+        {image:'/../images/image(2).png',name:'腾讯文档',type:'document', url: ''},
+        {image:'/../images/image(3).png',name:'腾讯地图',type:'map', url: ''},
+        {image:'/../images/image(4).png',name:'数据中心',type:'data', url: '/pages/dataCenter/index'},
+        {image:'/../images/image(4).png',name:'数据中心',type:'data', url: '/pages/dataCenter/index'},
+        {image:'/../images/image(4).png',name:'数据中心',type:'data', url: '/pages/dataCenter/index'},
+        {image:'/../images/image(4).png',name:'数据中心',type:'data', url: '/pages/dataCenter/index'},
       ],
     }
   }

pages/components/nav/index.js

@@ -0,0 +1,102 @@
+Component({
+  options: {
+    styleIsolation: 'shared'
+  },
+  properties: {
+    navType: {
+      type: "string",
+      value: ""
+    },
+    titleText: {
+      type: "string",
+      value: ""
+    }
+  },
+  data: {
+    visible: false,
+    sidebar: [{
+        title: '首页',
+        url: "pages/home/index",
+        isSidebar: true
+      }, {
+        title: '搜索页',
+        url: "pages/search/index",
+        isSidebar: false
+      }, {
+        title: '发布页',
+        url: "pages/release/index",
+        isSidebar: false
+      },
+      {
+        title: '消息列表页',
+        url: "pages/message/index",
+        isSidebar: true
+      },
+      {
+        title: '对话页',
+        url: "pages/chat/index",
+        isSidebar: false
+      },
+      {
+        title: '个人中心页',
+        url: "pages/my/index",
+        isSidebar: true
+      },
+      {
+        title: '个人信息表单页',
+        url: "pages/my/info-edit/index",
+        isSidebar: false
+      },
+      {
+        title: '设置页',
+        url: "pages/setup/index",
+        isSidebar: false
+      },
+      {
+        title: '数据图表页',
+        url: "pages/dataCenter/index",
+        isSidebar: false
+      },
+      {
+        title: '登录注册页',
+        url: "pages/login/login",
+        isSidebar: false
+      },
+    ]
+  },
+  methods: {
+    openDrawer() {
+      this.setData({
+        visible: true
+      })
+    },
+    itemClick(e) {
+      const that = this;
+      const { isSidebar , url } = e.detail.item;
+      if(isSidebar){
+        wx.switchTab({
+          url: `/${url}`,
+        }).then(() => {
+          // 防止点回tab时，sidebar依旧是展开模式
+          that.setData({
+            visible: false
+          })
+        })
+      } else {
+        wx.navigateTo({
+          url: `/${url}`,
+        }).then(() => {
+          that.setData({
+            visible: false
+          })
+        })
+      }
+    },
+
+    searchTurn() {
+      wx.navigateTo({
+        url: `/pages/search/index`,
+      })
+    }
+  }
+})

pages/components/nav/index.wxml

@@ -0,0 +1,16 @@
+<view class="home-navbar">
+  <t-navbar title="{{ titleText }}">
+    <view slot="left">
+      <view class="home-navbar__left">
+        <t-button bind:touchend="openDrawer" icon="view-list" size="large" variant="text" shape="square" />
+        <t-search 
+        shape="round" 
+        placeholder="请搜索你想要的内容"
+        bindtap="searchTurn"
+        wx:if="{{navType === 'search'}}"
+        />
+      </view>
+    </view>
+  </t-navbar>
+  <t-drawer visible="{{visible}}" items="{{sidebar}}" placement="left" title="页面目录" bind:item-click="itemClick" />
+</view>

pages/home/index.js

@@ -26,6 +26,8 @@ Page({
       cardInfo: cardRes.data,
       swiperList: swiperRes.data
     })
+
+
   },
   onLoad(option) {
     if (wx.getUserProfile) {
@@ -69,5 +71,6 @@ Page({
     wx.navigateTo({
       url: '/pages/release/index',
     });
-  },
+  }
+
 })

pages/home/index.json

@@ -8,7 +8,7 @@
     "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
     "t-message": "tdesign-miniprogram/message/message",
     "t-button": "tdesign-miniprogram/button/button",
-    "nav": "./components/nav",
-    "card": "./components/card"
+    "nav": "../components/nav",
+    "card": "../components/card"
   }
 }

pages/home/index.less

@@ -8,6 +8,32 @@ page {
   font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
 }
 
+
+.t-navbar {
+    --td-navbar-padding-top: @navbar-padding-top;
+    --td-navbar-height: calc(@nav-bar-height - @navbar-padding-top) !important;
+
+    &__left {
+      margin: 0;
+    }
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    padding: 0 16rpx;
+
+    .t-search {
+      --td-search-height: 64rpx;
+      --td-search-font-size: @font-size-mini;
+      width: 375rpx;
+
+      .t-icon {
+        font-size: @font-size-default  !important;
+      }
+    }
+  }
+
 .home {
 
   background-color: @bg-color;

pages/home/index.wxml

@@ -1,5 +1,6 @@
 <view class="home">
-  <nav />
+<!-- 子组件直接进行跳转会有相对路径问题，这里提升至父组件进行 -->
+  <nav nav-type="search" />
   <view class="home__content">
     <t-tabs defaultValue="recommend">
       <t-tab-panel label="推荐" value="recommend">

pages/message/index.json

@@ -3,7 +3,8 @@
     "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-icon": "tdesign-miniprogram/icon/icon",
     "t-cell": "tdesign-miniprogram/cell/cell",
-    "t-badge": "tdesign-miniprogram/badge/badge"
+    "t-badge": "tdesign-miniprogram/badge/badge",
+    "nav": "../components/nav"
   },
   "navigationStyle": "custom",
   "disableScroll": true

pages/message/index.wxml

@@ -1,7 +1,8 @@
 <!--pages/message/message.wxml-->
-<t-navbar class="nav-bar" title="全部消息">
+<!-- <t-navbar class="nav-bar" title="全部消息">
   <t-icon slot="left" name="view-list" size="48rpx" />
-</t-navbar>
+</t-navbar> -->
+<nav nav-type="title" title-text="全部消息" ></nav>
 <scroll-view class="message-list" scroll-y refresher-enabled refresher-triggered="{{ loading }}" bindrefresherrefresh="getMessageList">
   <t-cell
     wx:for="{{ messageList }}"

pages/my/index.js

@@ -36,6 +36,6 @@ Page({
     })
   },
   GotoEdit(){
-    wx.navigateTo({ url: '/pages/my/info-edit/index' });
+    wx.navigateTo({ url: `/pages/my/info-edit/index` });
   },
 })

pages/my/index.json

@@ -8,7 +8,8 @@
     "t-image": "tdesign-miniprogram/image/image",
     "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-grid": "tdesign-miniprogram/grid/grid",
-    "t-grid-item": "tdesign-miniprogram/grid-item/grid-item"
+    "t-grid-item": "tdesign-miniprogram/grid-item/grid-item",
+    "nav": "../components/nav"
   },
   "navigationStyle": "custom"
 }

pages/my/index.wxml

@@ -1,8 +1,6 @@
 <!--pages/my/index.wxml-->
 <view class="container">
-<t-navbar class="nav-bar" title="我的">
-  <t-icon slot="left" name="view-list" size="48rpx"/>
-</t-navbar>
+<nav nav-type="title" title-text="我的" />
   <view class = "info">
     <view class = "person-info">
     <t-cell-group class = "cell-group">
@@ -44,17 +42,19 @@
   </view>
   <view class="service">
   <view class="tip">推荐服务</view>
-  <t-grid class="block" column="{{4}}">
+  <t-grid class="block" column="{{4}}" >
   <t-grid-item wx:for="{{service}}"
     wx:key="item"
     text="{{item.name}}" image="{{item.image}}"
-    class="service-item" />
+    class="service-item"
+    url="{{item.url}}"
+     />
   </t-grid>
   </view>
   <view class="setting"> 
     <t-cell-group theme="card" class="set-group">
   <t-cell title="联系客服" leftIcon="service" t-class-note="cell-note"  hover arrow />
-  <t-cell title="设置" leftIcon="setting"  t-class-note="cell-note"  hover arrow />
+  <t-cell title="设置" leftIcon="setting"  t-class-note="cell-note" url="/pages/setup/index"  hover arrow />
 </t-cell-group>
   </view>
 </view>

project.private.config.json

@@ -1,9 +1,9 @@
-{
-  "projectname": "tdesign-miniprogram-starter",
-  "setting": {
-    "compileHotReLoad": true,
-    "urlCheck": false
-  },
-  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-  "libVersion": "2.32.3"
+{
+  "projectname": "tdesign-miniprogram-starter",
+  "setting": {
+    "compileHotReLoad": true,
+    "urlCheck": false
+  },
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "libVersion": "2.32.3"
 }