动静态tab

This commit is contained in:
shijingjing
2022-03-10 19:21:11 +08:00
parent d9cd37f3cb
commit a733919cc5

View File

@@ -21,8 +21,9 @@
<div class="line"></div>
<!-- tab栏 -->
<div class="tab-list">
<div v-for="(item, index) in data.resident.tsrqInfos" :key="index" :class="tabIndex == index ? 'tab-item active' : 'tab-item' " @click="tabIndex=index">
<img :src="tabIndex == index ? item.activeIcon : item.icon" alt="">
<div v-for="(item, index) in tabList" :key="index" :class="tabIndex == index ? 'tab-item active' : 'tab-item' " @click="tabIndex=index">
<img :src="tabIndex == index ? item.activeIcon : item.icon" alt="" v-if="index==0">
<img :src="tabIndex == index ? './components/img/tsrq@2x.png' : './components/img/tsrq备份@2x.png'" alt="" v-else>
<p>{{item.name}}</p>
</div>
</div>
@@ -139,32 +140,23 @@ export default {
return {
id: '',
data: [],
tabList: [
{
icon: require('./components/img/icon1n@2x.png'),
activeIcon: require('./components/img/icon1h@2x.png'),
name: '基本信息',
},
{
icon: require('./components/img/tsrq@2x.png'),
activeIcon: require('./components/img/tsrq备份@2x.png'),
name: '残疾人员',
},
{
icon: require('./components/img/tsrq@2x.png'),
activeIcon: require('./components/img/tsrq备份@2x.png'),
name: '精神病人',
},
{
icon: require('./components/img/tsrq@2x.png'),
activeIcon: require('./components/img/tsrq备份@2x.png'),
name: '吸毒人员',
},
],
tabList: [],
// {
// icon: require('./components/img/icon1n@2x.png'),
// activeIcon: require('./components/img/icon1h@2x.png'),
// name: '基本信息',
// },
// {
// icon: require('./components/img/tsrq@2x.png'),
// activeIcon: require('./components/img/tsrq备份@2x.png'),
// name: '残疾人员',
// },
tabIndex: 0,
}
},
computed: {},
computed: {
},
watch: {},
onLoad(o) {
this.id = o.id
@@ -180,6 +172,21 @@ export default {
this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
if (res.code == 0) {
this.data = res.data
if (res.data.resident.tsrqInfos) {
this.tabList = res.data.resident.tsrqInfos
let info = {
icon: require('./components/img/icon1n@2x.png'),
activeIcon: require('./components/img/icon1h@2x.png'),
name: '基本信息',
}
this.tabList.unshift(info)
} else {
this.tabList =[{
icon: require('./components/img/icon1n@2x.png'),
activeIcon: require('./components/img/icon1h@2x.png'),
name: '基本信息',
}]
}
}
})
},