uniapp이 탭 기능을 구현하는 방법

Uniapp은 탭 기능을 구현합니다. 먼저 외부 프레임을 작성하고 [display: flex]를 사용하여 상단에 탭을 고정한 다음 삼항 연산을 사용하여 각각 정렬을 할당하고 선택한 경우 [inv-h-se] 스타일을 추가합니다. ; 마지막으로 2개의 다른 컨테이너를 작성하고 [v-show]를 사용하여 전환합니다.

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, Dell G3 컴퓨터.

uniapp에서 탭 기능을 구현하는 방법:

단계 지침:

1. 먼저 외부 프레임을 작성한 다음 2개의 내용을 작성하고, 먼저 display: flex를 사용하여 상단의 탭을 수정합니다. >; 그런 다음 선택된 것과 선택되지 않은 것을 구별하기 위해 2개의 다른 스타일을 작성합니다. display: flex;，随后写2个不同的样式去区分选中和未选择

2、三目运算分别给他们赋一个排序，点击的时候获取是第一个还是第二个，如果选中则添加inv-h-se样式

3、return中默认显示第一个

4、最后写2个不同的容器，使用v-show

2. 삼항 연산은 각각에 정렬을 지정합니다. 클릭하면 첫 번째인지 두 번째인지 확인합니다. 선택한 경우 inv-h -se 스타일을 추가합니다.

3. 기본적으로 첫 번째 항목이 반환됩니다.

4. 마지막으로 2개의 다른 컨테이너를 작성하고 v-show를 사용하여

<template>
        <view>
                <view class="inv-h-w">
                        <view :class="[&#39;inv-h&#39;,Inv==0?&#39;inv-h-se&#39;:&#39;&#39;]" @click="Inv=0">选项卡1</view>
                        <view :class="[&#39;inv-h&#39;,Inv==1?&#39;inv-h-se&#39;:&#39;&#39;]" @click="Inv=1">我是选项卡二</view>
                </view>
                <view class="" v-show="Inv == 0">
                        我是选项卡一
                </view>
                <view class="" v-show="Inv == 1">
                        我是选项卡二
                </view>
        </view>
</template>
 
<script>
        export default {
                data() {
                        return {
                                Inv:0
                        }
                },
                methods: {
                        changeTab(Inv){
                                that.navIdx = Inv;
                                 
                        },
                }
        }
</script>
         
<style>
        .inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
        .inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
        .inv-h-se{color: #5BA7FF;border-bottom: 4upx solid #5BA7FF;}
        page{background-color: #F2F2F2;}
</style>

를 전환하면 다음과 같습니다.

🎜관련 무료 학습 권장 사항: 🎜프로그래밍 비디오🎜🎜🎜

위 내용은 uniapp이 탭 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!