105 lines
2.2 KiB
Vue
105 lines
2.2 KiB
Vue
<template>
|
||
<div class="wrapper">
|
||
<!-- 楼层装修组件 -->
|
||
<!-- <u-navbar class="navbar" :is-back="false" :is-fixed="false">
|
||
<div class="tab-container">
|
||
<div
|
||
v-for="(item, index) in list1"
|
||
:key="index"
|
||
:class="{ active: currentTabIndex === index }"
|
||
@click="click(item)"
|
||
>
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</u-navbar> -->
|
||
<!-- <u-tabs-swiper ref="tabs" :list="list" :is-scroll="true" current="0"></u-tabs-swiper> -->
|
||
<u-tabs
|
||
name="cate_name"
|
||
count="cate_count"
|
||
:list="list"
|
||
:is-scroll="false"
|
||
:current="current"
|
||
@change="change"
|
||
></u-tabs>
|
||
|
||
<!-- 商城 -->
|
||
<tpl ref="tpl" v-if="currentTabIndex == 1" :ste="1" />
|
||
<!-- 本地生活 -->
|
||
<tpl ref="childComp" v-if="currentTabIndex == 0" :ste="0" />
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import tpl from "@/pages/tabbar/home/views.vue";
|
||
import Views from "./views.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [
|
||
{
|
||
name: "本地生活",
|
||
},
|
||
{
|
||
name: "商城",
|
||
},
|
||
],
|
||
current: 0,
|
||
|
||
background: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
list1: [
|
||
{
|
||
name: "本地生活",
|
||
},
|
||
{
|
||
name: "商城",
|
||
},
|
||
],
|
||
currentTabIndex: 0,
|
||
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
||
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
|
||
};
|
||
},
|
||
|
||
components: {
|
||
tpl,
|
||
},
|
||
onReachBottom() {
|
||
console.log("触底了");
|
||
this.$refs.childComp.loadMon();
|
||
},
|
||
methods: {
|
||
change(index) {
|
||
this.current = index;
|
||
this.currentTabIndex = index;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tab-container div.active {
|
||
border-bottom: 2px solid #f50505;
|
||
color: #f50505;
|
||
background-color: transparent;
|
||
}
|
||
.wrapper {
|
||
// background: red;
|
||
}
|
||
.navbar {
|
||
height: 100%;
|
||
}
|
||
::v-deep {
|
||
.u-tabs {
|
||
padding: 25px 20px 0px 20px;
|
||
}
|
||
.u-tab-item {
|
||
color: $main-color !important;
|
||
}
|
||
.u-tab-bar {
|
||
background-color: $light-color !important;
|
||
}
|
||
}
|
||
</style>
|