The TAB bar on the home page toggles the burger page style, and the point is, when you get to the last one, you want to show the full content,

The first time a placeholder is used and flex-shrink: 0; Flex-shrink: 0, does not participate in the calculation of the remaining space. The default value is 1

The front part

<div slot="nav-right" class="placeholder"> <div slot="nav-right" class="hamburger- BTN "@click="isChanelEditDilog=true"> < I class="toutiao toutiao-gengduo"></i> </div>Copy the code

The CSS part

Placeholder {width: 66px; height: 82px; flex-shrink: 0; }. Hamburger - BTN {position: fixed; right: 0; width: 66px; height: 82px; display: flex; justify-content: center; align-items: center; background-color: #fff; Opacity: 0.902; i.toutiao { font-size: 33px; } &::before { content: ''; width: 1px; height: 100%; background-image: url(~@/assets/gradient-gray-line.png); background-size: contain; }}Copy the code

Page completion code

<template> <div class="home-container" > <! <van-nav-bar class="page-nav-bar" fixed > <van-button class="search-btn" slot="title" type="info" Size ="small" round icon="search" to=" search"> </van-button> </van-nav-bar> <! -- / navigation bar --> <! <van-tabs class=" Chanel-tabs "V-model ="active" animated swipeable> <van-tab v-for="channel in channels" :key="channel.id" :title="channel.name"> <! <article-list :channel="channel"></article-list> </van-tab> <div slot="nav-right" class="placeholder"></div> <div slot="nav-right" class="hamburger-btn" @click="isChanelEditDilog=true"> <i class="toutiao toutiao-gengduo"></i> </div> </van-tabs> <! <van-popup closeicon -position="top-left" V-model ="isChanelEditDilog" closeable position="bottom" :style="{ height: '100%' }"> <chanel-edit :my-channels="channels" :active="active" @change-chanel="changeChanel"></chanel-edit> </van-popup> </div> </template> <script> import { getUserInfoList } from '@/api/user' import articleList from './components/article-list' import ChanelEdit from './components/chanel-edit' import { mapState } from 'vuex' import { getItem } from '@/store/storage' export default { name: 'HomeIndex', components: { articleList, ChanelEdit }, props: {}, data() {return {active: 0, channels: [], // Channels isChanelEditDilog: false}}, computed: {... mapState(['user']) }, watch: {}, created() { this.loadChannels() }, mounted() { }, methods: { async loadChannels() { try { // const { data } = await getUserInfoList() // this.channels = data.data.channels // Console. log(data) let channels = [] If (this.user) {// If (this.user) {const {data} = await getUserInfoList() channels = data.data.channels} else { // 2. Const localChannels = getItem('TOUTIAO_CHANELS') // 3 If (localChannels) {channels = localChannels} else {// 4 Const {data} = await getUserInfoList() channels = data.data.channels}} this.channels = channels} Catch (error) {console.log(error) this.$toast(' Failed to get channel list data 123456', error)}}, // Update the active channel project changeChanel(index, isChanelEditDilog = true) { this.active = index this.isChanelEditDilog = isChanelEditDilog } }, } </script> <style scoped lang="less"> .home-container { padding-top: 174px; padding-bottom: 100px; /deep/ .van-nav-bar__title { max-width: unset; } .search-btn { width: 555px; height: 64px; background-color: #5babfb; border: none; font-size: 28px; .van-icovan-iconn { font-size: 32px; } } /deep/ .chanel-tabs { .van-tabs__wrap { position: fixed; z-index: 1; left: 0; right: 0; top: 92px; height: 82px; } .van-tab { min-width: 200px; border-right: 1px solid #edeff3; font-size: 30px; color: #777777; } .van-tab--active { color: #333; } .van-tabs__nav { padding: 0; } .van-tabs__line { width: 31px ! important; height: 6px; bottom: 8px; background-color: #3296fa; }.placeholder {width: 66px; height: 82px; flex-shrink: 0; }. Hamburger - BTN {position: fixed; right: 0; width: 66px; height: 82px; display: flex; justify-content: center; align-items: center; background-color: #fff; Opacity: 0.902; i.toutiao { font-size: 33px; } &::before { content: ''; width: 1px; height: 100%; background-image: url(~@/assets/gradient-gray-line.png); background-size: contain; } } } } </style>Copy the code