赞
踩
- //App.vue
- onLaunch: function() {
- //隐藏tabBar
- uni.hideTabBar()
- uni.removeStorageSync('selectedIndex');
- },
- <template>
- <!-- <view class="tabBars">
- <view class="tabs" v-for="(item,index) in tabList" :key="index" @tap="switchTab(index)">
- <image class="imgs" :src="$jointImage(item.selectedIconPath)" v-if="item.state"></image>
- <image class="imgs" :src="$jointImage(item.iconPath)" v-else></image>
- <view class="text" :style="{color:isActive(item.pagePath) ? ' #76bd21' : '' }">{{item.text}}</view>
- </view>
- </view> -->
- <uni-transition mode-class="fade" :duration="200" :show="true">
- <view>
- <view class="tab-content">
- <slot />
- </view>
- <view class="tabbar">
- <view class="navigator">
- <view ref='warpper' class="warpper">
- <view ref="navItem" class="navigator-item" v-for="(item,index) in tabList" :key="item.pagePath"
- @click="switchTab(item,index)" :data-index='index'>
- <image class="icon" :src="$jointImage(item.iconPath)" v-if="selectedIndex !== index">
- </image>
- <image class="icon" :src="$jointImage(item.selectedIconPath)" v-else></image>
- <text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- </uni-transition>
- </template>
-
- <script>
- export default {
- data() {
- return {
- selectedIndex: uni.getStorageSync('selectedIndex') || 0,
- configuration: {},
- tabList: [],
- };
- },
- mounted() {
- this.alliconSet()
- },
- methods: {
- alliconSet() {
- uni.$http.post('index/iconSet', {}).then(res => {
- this.configuration = res.data.data
- this.tabList = [{
- pagePath: "/pages/index/index",
- text: "首页",
- state: true,
- iconPath: this.configuration.tabbar1_nocheck,
- selectedIconPath: this.configuration.tabbar1_check
- },
-
- {
- pagePath: "/pages/menu/menu",
- text: "点单",
- state: false,
- iconPath: this.configuration.tabbar2_nocheck,
- selectedIconPath: this.configuration.tabbar2_check
- },
- {
- pagePath: "/pages/order_two/order_two",
- text: "订单",
- state: false,
- iconPath: this.configuration.tabbar3_nocheck,
- selectedIconPath: this.configuration.tabbar3_check
- },
- {
- pagePath: "/pages/my/my",
- text: "我的",
- state: false,
- iconPath: this.configuration.tabbar4_nocheck,
- selectedIconPath: this.configuration.tabbar4_check
- },
- ]
- })
- },
- switchTab(items, indexs) {
- uni.switchTab({
- url: `${this.tabList[indexs].pagePath}`
- });
- this.tabList.forEach((v, i) => {
- if (items.pagePath === v.pagePath) {
- uni.setStorageSync('selectedIndex', indexs);
- }
- })
-
- },
- },
- };
- </script>
-
- <style lang="scss" scoped>
- .tabbar {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 140rpx;
- z-index: 999;
- background: #F5F5F5;
- border-top: 2rpx solid #eee;
- }
-
- .navigator {
- width: 85%;
- margin: 0 auto;
- padding: 20rpx;
- overflow: hidden;
- }
-
- .warpper {
- display: flex;
- justify-content: space-between;
- width: auto;
- transition-timing-function: ease-out;
- }
-
- .navigator-item {
- display: flex;
- align-items: center;
- flex-direction: column;
- width: 50rpx;
- height: 100%;
- }
-
- .item-text {
- margin-top: 6rpx;
- color: #777E86;
- font-size: 24rpx;
- }
-
- .text-active {
- color: #76bd21 !important;
- }
-
- .icon {
- width: 24px;
- height: 24px;
- }
- </style>
- import UniTabBar from '@/components/uni-tab-bar.vue'
- Vue.component('UniTabBar', UniTabBar)
- //index.vue
-
- <template>
- <view>
- <UniTabBar />
- </view>
- </template>
-
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。