<template> <view class="content"> <view class="content-tabs"> <view class="content-tabs-text" v-for="(v,index) in list" @click="jump(index)" :key="index"> <view class="" :style="subscript == index?'color: #000000;' : 'color: #444444;'"> {{v.name}} </view> <view v-show="subscript == index" class="content-tabs-text-area"></view> </view> </view> <comindex class="content-mindex" :subscript='subscript'></comindex> <com-tabbar @tabBarChange='tabBarChange' :list=" [{ name: '首页', icon: '/static/tabbar/tb1.png', selectIcon:'/static/tabbar/td1.png', url: '/pages/home/index', type: 'type' }, { name: '我的需求', icon: '/static/tabbar/tb2.png', selectIcon: '/static/tabbar/td2.png', url: '/pages/demand/index', type: 'demand' }, { name: '发布', icon: '/static/tabbar/fb.png', selectIcon:'/static/tabbar/fb.png', url: '/pages/release/index', type: 'type' }, { name: '动态', icon: '/static/tabbar/tb3.png', selectIcon: '/static/tabbar/td3.png', url: '/pages/order/index', type: 'type' }, { name:'我的' , icon:'/static/tabbar/tb4.png' , selectIcon:'/static/tabbar/td4.png', url: '/pages/my/index', type: 'type' }]"></com-tabbar> </view> </template> <script> import apiBaseConfig from '@/config/index.js'; import uniGo from '@/utils/unIGO.js'; import comindex from '@/pages/demand/components/index.vue' export default { data() { return { imgBgUrl: apiBaseConfig.imgBgUrl, globalData: getApp().globalData, title: 'Hello', list: [{ name: '已发布' }, { name: '已驳回' }, { name: '待支付' }, { name: '已接单' }], subscript: '0', } }, components: { comindex }, onLoad(option) { // console.log(option, 'pppppp') if(option.id){ this.subscript = option.id } }, methods: { tabBarChange(url, type) { if (type == 'type') { uniGo.reLaunch({ url: url }); } }, jump(ind) { this.subscript = ind } } } </script> <style lang="scss" scoped> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; &-tabs { display: flex; justify-content: space-around; width: 100%; position: fixed; padding-top: 20rpx; padding-bottom: 20rpx; top: -1rpx; z-index: 999; background-color: #f3f4f6; &-text { >view:nth-child(1) { font-size: 24rpx; } &-area { width: 75rpx; height: 6rpx; background: #2C66FF; } } } &-mindex { margin-top: 60rpx; width: 100%; margin-bottom: 150rpx; } } </style>