<template>
<div id="tabbarItem">
<van-tabs v-model="active"
animated
swipeable
sticky
:border="false"
:offset-top="47"
ref="tabs"
type="line"
color="#28BE57"
title-active-color="#28BE57"
animated:yes>
<!-- 全部 -->
<van-tab>
<div slot="title">
<span>{{$t(itemsTitle[0])}}</span>
</div>
<ProduceItem :product_lists="tabbar_all_product_list" />
</van-tab>
<!-- 晚餐 -->
<van-tab>
<div slot="title">
<span>{{$t(itemsTitle[1])}}</span>
</div>
<ProduceItem :product_lists="flash_sale_product_list" />
</van-tab>
<!-- 人气 -->
<van-tab>
<div slot="title">
<span>{{$t(itemsTitle[2])}}</span>
</div>
<ProduceItem :product_lists="tabbar_all_product_list" />
</van-tab>
<!-- 心选 -->
<van-tab>
<div slot="title">
<span>{{$t(itemsTitle[3])}}</span>
</div>
<ProduceItem :product_lists="flash_sale_product_list" />
</van-tab>
</van-tabs>
</div>
</template>
<script type="text/javascript">
import ProduceItem from './ProduceItem'
export default {
props: {
tabbar_all_product_list: Array,
flash_sale_product_list: Array,
},
data () {
return {
active: 0,
itemsTitle: ['common.all', 'home.dinner', 'home.popularity', 'home.goodChoose'],
}
},
components: {
ProduceItem
}
}
</script>
<style lang="less" scoped>
#tabbarItem {
width: 100%;
}
</style>
tabbarItem
最新推荐文章于 2023-08-19 14:36:41 发布