12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <template>
- <view class="ezy-custom-tabbar">
- <view class="tabbar-item-box">
- <view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path)"
- :style="{backgroundImage: 'url(' + item.iconPath + ')'}"></view>
- </view>
- </view>
- </template>
- <script>
- import {
- useTabBarHistory
- } from '@/utils/emitEvents.js';
- import {
- toast
- } from '@/utils/common'
- export default {
- data() {
- return {
- tabList: [{
- iconPath: 'static/images/tabbar/unselect/plan-sj.png',
- path: `/pages/study/index`
- },
- {
- iconPath: 'static/images/tabbar/unselect/partner-sj.png',
- path: '/pages/game/index'
- },
- {
- iconPath: 'static/images/tabbar/unselect/my-sj.png',
- path: `/pages/my/index`
- },
- // 更多 Tab 项...
- ]
- };
- },
- methods: {
- switchTab(path, params = {}) {
- if(path =='/pages/study/index2'||path =='/pages/study/index3'){
- toast("此功能页面暂未开放!")
- return false
- }
- let storage = useTabBarHistory().getTabBarStorage()
- let queryString = Object.keys(storage).map(key =>
- `${encodeURIComponent(key)}=${encodeURIComponent(storage[key])}`).join('&');
- if (queryString) {
- path += `?${queryString}`;
- }
- uni.navigateTo({
- url: path
- });
- // 使用 uni.switchTab 进行跳转(适用于 tabBar 页面)
- // if (this.isTabBarPage(path)) {
- // uni.switchTab({
- // url: path
- // });
- // } else {
- // // 使用 uni.navigateTo 进行跳转(适用于非 tabBar 页面)
- // uni.navigateTo({
- // url: path
- // });
- // }
- },
- isTabBarPage(path) {
- // 根据你的 tabBar 页面路径进行判断
- const tabBarPages = ['/pages/study/index', '/pages/study/index', '/pages/study/index', '/pages/my/index'];
- return tabBarPages.includes(path);
- }
- },
- created() {
- }
- }
- </script>
- <style scoped>
- .custom-tabbar {
- display: flex;
- justify-content: space-around;
- align-items: center;
- /* 其他样式 */
- }
- .tab-item {
- flex: 1;
- /* 样式 */
- }
- .tab-icon {
- /* 图标样式 */
- }
- </style>
|