tabbarItem

迈不过友情╰ 2023-07-12 11:51 31阅读 0赞

<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>