学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

69 lines
1.4 KiB

<template>
<view class="comments">
<view class="navBox">
<view class="nav" v-for="(item,index) in navList" :key="index" @click="changeNav(item)" :class="{active: currentNav==item.id}">{{ item.text }}</view>
</view>
<view class="card" v-for="(item,index) in list">
<commentItem :item="item"/>
</view>
</view>
</template>
<script>
// import commentItem from './commentItem'
export default {
// components: { commentItem },
props: ['list'],
data() {
return {
// 0,全部,1,有图,2最新,3有视频
navList: [
{text: '全部', id: 0},
{text: '最新', id: 2},
{text: '有图', id: 1},
{text: '有视频', id: 3},
],
currentNav: 0,
}
},
methods: {
changeNav(item) {
this.currentNav = item.id
this.$emit('changeNav', item.id)
}
}
}
</script>
<style lang="scss" scoped>
.comments {
width: 100%;
padding: 0 28rpx;
.navBox {
padding: 32rpx 0 24rpx 0;
display: flex;
z-index: 9;
.nav {
padding: 10rpx 24rpx;
height: 60rpx;
background: rgba(25,137,250,0.1);
border-radius: 8rpx;
border: 2rpx solid #1989FA;
font-size: 28rpx;
color: $themC;
margin-right: 20rpx;
text-align: center;
&.active {
color: #fff;
background: $themC;
}
}
}
.card {
width: 100%;
padding: 24rpx 28rpx;
margin-bottom: 20rpx;
}
}
</style>