新增tab组件

zhiyangdu
1 parent 3f0c28e1
Showing 4 changed files with 152 additions and 5 deletions
src/components/tabBox/tabBox.less
src/components/tabBox/tabBox.vue
src/main.js
src/pages/mall/mall.vue
+.main-box {
+    .tabs-box {
+        padding-top: 30px;
+        padding-bottom: 30px;
+        width: 750px;
+        height: auto;
+        &.bg-white {
+            background-color: #ffffff;
+        }
+        &.bg-excessive-color {
+            background: linear-gradient(90deg, rgba(255, 246, 248, 1) 0%, rgba(255, 233, 239, 1) 100%);
+        }
+        .box {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            margin: 0 auto;
+            width: 690px;
+            height: 100%;
+            .tab {
+                color: #B4B4B4;
+                font-size: 32px;
+                .line {
+                    background-color: transparent;
+                    margin: 8px auto 0 auto;
+                    width: 40px;
+                    height: 4px;
+                }
+                &.active {
+                    color: #333333;
+                    .line {
+                        background-color: #FC1541;
+                        width: 40px;
+                        height: 4px;
+                    }
+                }
+            }
+        }
+    }
+    .tabs-swiper-box {
+        width: 750px;
+        height: auto;
+        .swipe {
+            width: 100%;
+            height: 100%;
+            .swipe-item {
+                width: 100%;
+                height: 100%;
+                .skeleton {
+                    &.brief {
+                        background-color: #ffffff;
+                    }
+                    &.boutique {
+                        background: linear-gradient(90deg, rgba(255, 246, 248, 1) 0%, rgba(255, 233, 239, 1) 100%);
+                    }
+                    &.commodity {
+                        background-color: #F9F9F9;
+                        .column-commodity-excessive {
+                            background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 100%);
+                            width: 750px;
+                            height: 30px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+<template>
+  <div class="tabBox">
+      <!-- 主内容区域 -->
+      <van-tabs @change="onChange" swipeable v-model="active">
+          <van-tab v-for="(item,index) in tabbar" :key="index" :title="item.title">
+              <div class="tabBox_main">
+                  <div class="tabbar" v-for="(item, index) in tabbaromponents.ads" :key="index">
+                  <!-- 关爱屋 -->
+                  <html-box
+                      v-if="item.style == '14'"
+                      :htmls="item">
+                  </html-box>
+                  <img-list-box
+                      v-if="item.style == '1'"
+                      @detail="toDetail"
+                      :imgLists="item">
+                  </img-list-box>
+                  <column-commodity-list-box
+                      v-if="item.style == '15'"
+                      @detail="toCommodityDetail"
+                      :columnLists="item">
+                  </column-commodity-list-box>
+                  </div>
+              </div>
+          </van-tab>
+      </van-tabs>
+  </div>
+</template>
+
+<script>
+    import htmlBox from "@/components/htmlBox/htmlBox";
+    import imgListBox from "@/components/imgListBox/imgListBox";
+    import columnCommodityListBox from "@/components/columnCommodityListBox/columnCommodityListBox";
+    import discountZone from "@/components/discountZone/discountZone";
+  export default {
+    name: 'name',
+    data () {
+      return {
+          active: 0,
+          tabbaromponents: null, // 组件库
+      }
+    },
+    props:["tabbar"],
+    components: {
+        htmlBox,
+        imgListBox,
+        columnCommodityListBox,
+        discountZone
+    },
+    created(){
+        // 初始化的时选中关爱屋
+        this.tabbaromponents = this.tabbar.find((item)=>{
+            return item.title === "关爱屋"
+        });
+        console.log(this.tabbaromponents)
+    },
+    methods: {
+        onChange(name, title) {
+            // 切换tab时判断展示哪个组件
+            this.tabbaromponents = this.tabbar.find((item)=>{
+                return item.title === title
+            });
+        }
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less">
+    @import './tabBox';
+</style>
@@ -6,7 +6,7 @@ import VueHead from &quot;vue-head&quot;;
 import sha1 from "sha1";
 import 'mint-ui/lib/style.css';
 import { Toast, Indicator,InfiniteScroll } from "mint-ui";
-import { Rate, Popup, Lazyload, Search, PullRefresh, Picker } from "vant";
+import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Tab, Tabs} from "vant";
 import App from "./App";
 import IdCard from './common/IdCard';
 import VueBus from 'vue-bus';
@@ -18,6 +18,8 @@ Vue.use(Rate);
 Vue.use(Popup);
 Vue.use(PullRefresh);
 Vue.use(Picker);
+Vue.use(Tab);
+Vue.use(Tabs);
 Vue.use(Lazyload, {
     preload: 90,
     loading: "static/img/x.jpg",
@@ -20,6 +20,7 @@
             <!-- 遍历ads，输出列表数据 -->
             <div class="ads-box">
+                <tabBox v-if="tabbar" :tabbar="tabbar"></tabBox>
                 <div class="ads" v-for="(item, index) in ads" :key="index">
                     <!--优惠专区-->
@@ -58,7 +59,7 @@
     import videoArea from "@/components/videoArea/videoArea";
     import style7 from "@/components/style_7/style_7";
     import horizList from "@/components/horizList/horizList";
-
+    import tabBox from "@/components/tabBox/tabBox";
     export default {
         name: 'mall',
         data() {
@@ -67,7 +68,8 @@
                 isLoading: false,       // 下拉刷新控制
                 banner:null,            // banner
                 navs: null,             // 导航
-                ads: null               // 列表
+                ads: null,               // 列表
+                tabbar:null              // tabbar嵌套组件
             }
         },
         components:{
@@ -77,7 +79,8 @@
             preferential,
             videoArea,
             style7,
-            horizList
+            horizList,
+            tabBox
         },
         created() {
@@ -150,7 +153,10 @@
                     if (datas.ads && datas.ads.length) {
                         this.$set(this, "ads", datas.ads);
                     }
-
+                    // 设置tabbar数据
+                    if (datas.tabbar && datas.tabbar.length) {
+                        this.$set(this, "tabbar", datas.tabbar);
+                    }
                     /* 获取优选库精选活动数据 结束 */
                 } else if (res.code == 400) {