uniapp开发动态小程序底部tab栏及相关问题处理

效果如下图

欢迎品鉴：

1. 删除原本page.json中的tabBar模块,以及其相应的"pages"下的tabBar页面路径，如下

1. "tabBar": {
2.   "color": "",
3.   "selectedColor": "#006EFF",
4.   "borderStyle": "black",
5.   "backgroundColor": "#fff",
6.   "list": [{
7.     "pagePath": "pages/tabs/index",
8.     "iconPath": "static/images/tabbar/icon-home.png",
9.     "selectedIconPath": "static/images/tabbar/icon-home-selected.png",
10.     "text": "首页"
11.   },{
12.     "pagePath": "pages/tabs/chatIndex",
13.     "iconPath": "static/images/tabbar/icon-chat.png",
14.     "selectedIconPath": "static/images/tabbar/icon-chat-selected.png",
15.     "text": "消息"
16.   },{
17.     "pagePath": "pages/tabs/friendIndex",
18.     "iconPath": "static/images/tabbar/icon-friends.png",
19.     "selectedIconPath": "static/images/tabbar/icon-friends-selected.png",
20.     "text": "好友"
21.   }, {
22.     "pagePath": "pages/tabs/personalCenter",
23.     "iconPath": "static/images/tabbar/icon-mine.png",
24.     "selectedIconPath": "static/images/tabbar/icon-mine-selected.png",
25.     "text": "我的"
26.   }]
27. },

复制代码

此为控制底部tabBar内容的模块
2.创建唯一page页面，作为承载原先所有tabBar页面（假设有四个）的父组件（假设路径为/pages/index/index）。

3.迁移原先tabBar页面文件至组件目次，并将这些component引入/pages/index/index

1. {
2.       "path": "pages/index/index",
3.       "style": {
4.         "navigationBarTitleText": "",
5.         "navigationStyle": "custom"//此处设置客制化标题栏
6.       },
7.       "usingComponents": {
8.         "index": "/components/tabs/index",
9.         "chatIndex": "/components/tabs/chatIndex",
10.         "friendIndex": "/components/tabs/friendIndex",
11.         "personalCenter": "/components/tabs/personalCenter"
12.       }
13.     }

复制代码

1. /pages/index/index引入四个components
2. import {index} from "../../components/tabs/index"
3. import {chatIndex} from "../../components/tabs/chatIndex"
4. import {friendIndex} from "../../components/tabs/friendIndex"
5. import {personalCenter} from "../../components/tabs/personalCenter"

复制代码

4.由于各个component是没有标题栏的，所以需要自定义标题栏，这也是最开始为什么需要客制化/pages/index/index页面标题栏的步调（开发客制化标题栏自行百度，难度较低）

5.处理各个component原先onload及onshow事件

在uniapp中，组件原先的onLoad事件可在各自component中用created事件代替，但是组件不含onShow事件，以下提供一种办理方式及一种思路：

• 将非必要事件转入created中触发，在/pages/index/index中处理所有必要onShow事件（如其他页面返回/pages/index/index的某个tab时需要刷新数据）
  如下：
  

1. onShow() {
2.     if(this.tabFlag == 1) {
3.     //tab1
4.       const tab1= this.selectComponent("#tab1");
5.       if(tab1) {
6.       //调用相关刷新数据事件
7.         tab1.data.getSessionList()
8.       }
9.     }
10.     else if(this.tabFlag == 2) {
11.     //tab2
12.     }
13.     else if(this.tabFlag == 3){
14.     //tab3
15.     }
16.     else if(this.tabFlag == 4){
17.     //tab4
18.     }
19.   }

复制代码

• 使用组件通讯（不具体叙述了）
  

6.组件切换及动效代码示例

1. //仅供参考
2. <template>
3.   <view>
4.     <index id="index" style="height: 100%;" v-if="tabFlag == 1"></index>
5.     <chatIndex id="chatIndex" v-if="tabFlag == 2"></chatIndex>
6.     <friendIndex id="friendIndex" v-if="tabFlag == 3"></friendIndex>
7.     <personalCenter id="personalCenter" v-if="tabFlag == 4"></personalCenter>
8.     <view class="tab-bar">
9.       <view :class="tabFlag==1 ?'tab-bar-item-selected':'tab-bar-item'" @click="tabFlag = 1">
10.         <image class="tab-img-style" :src="tabFlag==1 ?'../../static/images/tabbar/icon-home-selected.png':'../../static/images/tabbar/icon-home.png'"></image>
11.       </view>
12.       <view :class="tabFlag==2 ?'tab-bar-item-selected':'tab-bar-item'" @click="tabFlag = 2">
13.         <image class="tab-img-style" :src="tabFlag==2 ?'../../static/images/tabbar/icon-chat-selected.png':'../../static/images/tabbar/icon-chat.png'"></image></view>
14.       <view :class="tabFlag==3 ?'tab-bar-item-selected':'tab-bar-item'" @click="tabFlag = 3">
15.         <image class="tab-img-style" :src="tabFlag==3 ?'../../static/images/tabbar/icon-friends-selected.png':'../../static/images/tabbar/icon-friends.png'"></image></view>
16.       <view :class="tabFlag==4 ?'tab-bar-item-selected':'tab-bar-item'" @click="tabFlag = 4">
17.         <image class="tab-img-style" :src="tabFlag==4 ?'../../static/images/tabbar/icon-mine-selected.png':'../../static/images/tabbar/icon-mine.png'"></image></view>
18.     </view>
19.   </view>
20. </template>
22. <script>
23. import {index} from "../../components/tabs/index"
24. import {chatIndex} from "../../components/tabs/chatIndex"
25. import {friendIndex} from "../../components/tabs/friendIndex"
26. import {personalCenter} from "../../components/tabs/personalCenter"
28. export default {
29.   components: {chatIndex,friendIndex,index,personalCenter},
30.   data() {
31.     return {
32.       tabFlag: 1,
33.     }
34.   },
35.   onLoad(options) {
36.     if(options.tabFlag){
37.       this.tabFlag = options.tabFlag;
38.     }
39.   },
40.   onShow() {
41.     if(this.tabFlag == 1) {
43.     }
44.     else if(this.tabFlag == 2) {
45.       const chatIndexComponent = this.selectComponent("#chatIndex");
46.       if(chatIndexComponent) {
47.         chatIndexComponent.data.getSessionList()
48.       }
49.     }
50.     else if(this.tabFlag == 3){
51.       const friendComponent = this.selectComponent("#friendIndex");
52.       if(friendComponent){
53.         friendComponent.data.getFriendList()
54.       }
55.     }
56.     else if(this.tabFlag == 4){
58.     }
59.   },
60.   methods: {
62.   }
63. }
64. </script>
66. <style lang="scss" scoped>
67. .tab-img-style{
68.   width: 40px;
69.   height: 40px;
70. }
73. .tab-bar {
74.   transform: translateX(7.5%);
75.   width: 85%;
76.   height: 70px;
77.   position: absolute;
78.   bottom: 10px;
79.   background-color: #FFf;
80.   border-radius: 40px;
81.   display: flex;
82.   flex-direction: row;
83.   align-content: center;
84.   justify-content: space-around;
85. }
86. .tab-bar-item{
87.   position: relative;
88.   display: flex;
89.   align-items: center;
90.   justify-content: center;
91.   animation: moveDown 0.5s ease-in-out;
92.   transform: translateY(0px);
93. }
94. .tab-bar-item:after{
95.   position: absolute;
96.   content: "";
97.   width: 60px;
98.   height: 60px;
99.   background-color: #fff;
100.   animation: moveDownAfter 0.5s ease-in-out;
101.   border-radius: 30px;
102.   transform: translateY(-5px);
103.   z-index: -2;
104.   opacity: 0;
105. }
106. .tab-bar-item-selected{
107.   position: relative;
108.   display: flex;
109.   align-items: center;
110.   justify-content: center;
111.   border-radius: 17.5px;
112.   animation: moveUp 0.5s ease-in-out;
113.   transform: translateY(-20px);
114. }
115. .tab-bar-item-selected:after{
116.   position: absolute;
117.   content: "";
118.   width: 60px;
119.   height: 60px;
120.   border-top:  2px solid gray;
121.   background-color: #fff;
122.   animation: moveUpAfter 0.5s ease-in-out;
123.   border-radius: 30px;
124.   transform: translateY(-5px);
125.   z-index: -2;
126. }
127. @keyframes moveUp {
128.   from {
129.     transform: translateY(0px);
130.   }
131.   to {
132.     transform: translateY(-20px);
133.   }
134. }
135. @keyframes moveUpAfter {
136.   from {
137.     transform: translateY(0px);
138.     border-radius: 20px;
139.   }
140.   to {
141.     transform: translateY(-5px);
142.     border-radius: 30px;
143.   }
144. }
145. @keyframes moveDown {
146.   from {
147.     transform: translateY(-20px);
148.   }
149.   to {
150.     transform: translateY(0px);
151.   }
152. }
153. @keyframes moveDownAfter {
154.   from {
155.     transform: translateY(-5px);
156.     border-radius: 30px;
157.   }
158.   to {
159.     transform: translateY(0px);
160.     border-radius: 20px;
161.   }
162. }
163. </style>

复制代码

言尽于此！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。