84 lines
1.6 KiB
Vue
84 lines
1.6 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>
|
|
<!-- 商城 -->
|
|
<tpl ref="tpl" v-if="currentTabIndex == 1" :ste="1" />
|
|
<!-- 本地生活 -->
|
|
<tpl ref="tpl" v-if="currentTabIndex == 0" :ste="0" />
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import tpl from "@/pages/tabbar/home/views.vue";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
background: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
list1: [
|
|
{
|
|
name: "本地生活",
|
|
},
|
|
{
|
|
name: "商城",
|
|
},
|
|
],
|
|
currentTabIndex: 0,
|
|
};
|
|
},
|
|
components: {
|
|
tpl,
|
|
},
|
|
methods: {
|
|
click(item) {
|
|
this.currentTabIndex = this.list1.indexOf(item);
|
|
},
|
|
},
|
|
onPullDownRefresh() {
|
|
this.$refs.tpl.init();
|
|
uni.stopPullDownRefresh();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tab-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
// background-color: #f0f0f0;
|
|
// padding: 0 16rpx 0 0;
|
|
font-size: 18px;
|
|
}
|
|
.tab-container div {
|
|
cursor: pointer;
|
|
padding: 5px 10px;
|
|
}
|
|
.tab-container div.active {
|
|
border-bottom: 2px solid #F50505;
|
|
color:#F50505;
|
|
background-color: transparent;
|
|
}
|
|
.wrapper {
|
|
// background: red;
|
|
}
|
|
.navbar{
|
|
height: 100%;
|
|
}
|
|
|
|
</style>
|