IT评测·应用市场-qidao123.com

标题: uniapp开发动态小程序底部tab栏及相关问题处理 [打印本页]
作者: 种地    时间: 2025-2-14 10:29
标题: 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事件，以下提供一种办理方式及一种思路：

  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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4