直播平台软件开发，uni-app实现选项卡功能

直播平台软件开发，uni-app实现选项卡功能

1

<view class="new-file"><br>    <br>    <!-- 第一种方法 --><br>    <!-- 头部选项卡 --><br>  <view class="head-nav"><br><view :class="navIndex==1?'activite':''" @click="checkIndex(1)">/view><br><view :class="navIndex==2?'activite':''" @click="checkIndex(2)"></view><br><view :class="navIndex==3?'activite':''" @click="checkIndex(3)">/view><br></view><br>    <!-- 内容切换 --><br>   <view class="content" v-if="navIndex==1"><br>      我是选项一<br>    </view><br>    <view class="content" v-if="navIndex==2"><br>      我是选项二<br>    </view><br>  <view class="content" v-if="navIndex==3"><br>      我是选项三<br>    </view><br> <br> <br> <br><script><br>  export default{<br>    data(){<br>      return{<br>        navIndex:1,<br>        listIndex:0<br>      }<br>    },<br>    methods:{<br>      checkIndex(index){<br>        this.navIndex =index;<br>      },<br>      <br>      checkListIndex(index){<br>        this.listIndex=index;<br>      }<br>    }<br>  }<br></script><br><style scoped><br>  .head-nav{<br>    width: 50%;<br>    margin:20rpx auto;<br>    display: flex;<br>    justify-content: space-between;<br>    align-items: center;<br>  }<br>  .activite{<br>    font-weight: bold;<br>    border-bottom: 6rpx solid #0065d9;<br>  }<br>  .head-nav>view{<br>    padding-bottom: 10rpx;<br>  }<br>  .box{background: #008000;}<br></style>

​以上就是 直播平台软件开发，uni-app实现选项卡功能，更多内容欢迎关注之后的文章