直播平台软件开发,uni-app实现选项卡功能
<view class="new-file">
<!-- 第一种方法 -->
<!-- 头部选项卡 -->
<view class="head-nav">
<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">/view>
<view :class="navIndex==2?'activite':''" @click="checkIndex(2)"></view>
<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">/view>
</view>
<!-- 内容切换 -->
<view class="content" v-if="navIndex==1">
我是选项一
</view>
<view class="content" v-if="navIndex==2">
我是选项二
</view>
<view class="content" v-if="navIndex==3">
我是选项三
</view>
<script>
export default{
data(){
return{
navIndex:1,
listIndex:0
}
},
methods:{
checkIndex(index){
this.navIndex =index;
},
checkListIndex(index){
this.listIndex=index;
}
}
}
</script>
<style scoped>
.head-nav{
width: 50%;
margin:20rpx auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.activite{
font-weight: bold;
border-bottom: 6rpx solid #0065d9;
}
.head-nav>view{
padding-bottom: 10rpx;
}
.box{background: #008000;}
</style>
以上就是 直播平台软件开发,uni-app实现选项卡功能,更多内容欢迎关注之后的文章
标签:index,选项卡,软件开发,app,直播,uni From: https://www.cnblogs.com/yunbaomengnan/p/17203224.html