四个分段器

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt " v-show="flag">
            <uni-segmented-control :current="current1" :values="lists" @clickItem="onClickItem1"  :styleType="styleType"
                :activeColor="activeColor"></uni-segmented-control>
        </view>

        <view>
            <input type="text" placeholder="搜索" v-show="!flag">
        </view>

        <view class="uni-padding-wrap uni-common-mt uni-bottom" >
            <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" :styleType="styleType"
                :activeColor="activeColor"></uni-segmented-control>
        </view>

        <view class="content">
            <view>
                <view v-show="typeChannel === 0">
                    选项卡1的内容
                </view>
               <view v-show="typeChannel === 1">
                    选项卡2的内容
                </view>
                <view v-show="typeChannel === 2">
                    选项卡3的内容
                </view>
                <view v-show="typeChannel === 3">
                    选项卡4的内容
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import uniSegmentedControl from '../../components/uni-segmented-control.vue';

    export default {
        data() {
            return {
                flag: false,
                items: [
                    '选项卡1',
                    '选项卡2',

                ],
                lists: [
                    '选项卡3',
                    '选项卡4'

                ],
                styles: [{
                    value: 'button',
                    text: '按钮'
                }, {
                    value: 'text',
                    text: '文字'
                }],
                colors: [
                    '#007aff',
                    '#4cd964',
                    '#dd524d'
                ],
                current: 0,
                current1 : 0,
                typeChannel: 0,
                activeColor: '#007aff',
                styleType: 'button',
                styleIndex: 0,
                colorIndex: 0,
            }
        },
        components: {
            uniSegmentedControl
        },
        methods: {
          
            onClickItem(index) {
                console.log(index)
                this.flag = !this.flag
                this.typeChannel = index;
            },
            onClickItem1(index) {
                console.log(index)
                this.current1 = index;
                this.typeChannel = 2+index;
            },
            styleChange(evt) {
                const value = evt.target.value;
                if (this.styleType !== value) {
                    this.styleType = value;
                    for (let i = 0; i < this.styles.length; i++) {
                        if (this.styles[i].value === value) {
                            this.styleIndex = i;
                            break;
                        }
                    }
                }
            },
            colorChange(evt) {
                if (this.styleType !== evt.target.value) {
                    this.activeColor = evt.target.value;
                    this.colorIndex = this.colors.indexOf(evt.target.value);
                }
            }
        }
    }
</script>

<style>
    page {
        height: auto;
    }

    .uni-bottom {
        margin-top: 200upx;
    }

    .content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300upx;
        text-align: center;
    }

    .color-tag {
        width: 50upx;
        height: 50upx;
    }
</style>