Commit d7bb2900a67a46ae0ea713948a4602f75cfbdda0
1 parent
f76df97d
动态设置tabbar的背景颜色
Showing
2 changed files
with
11 additions
and
6 deletions
src/components/tabBox/tabBox.vue
| ... | ... | @@ -8,14 +8,14 @@ |
| 8 | 8 | <div class="tabBox_main" ref="tabsSwiperBox"> |
| 9 | 9 | <div class="tabbar" v-for="(item, index) in tabbaromponents&&tabbaromponents.ads" :key="index"> |
| 10 | 10 | <!-- 关爱屋简介 --> |
| 11 | - <div class="skeleton brief" ref="brief"> | |
| 11 | + <div :style="{backgroundColor:tabbar[0].color || tabbarBackgroud}" class="skeleton brief" ref="brief"> | |
| 12 | 12 | <html-box |
| 13 | 13 | v-if="item.style === '14'" |
| 14 | 14 | :htmls="item.content"> |
| 15 | 15 | </html-box> |
| 16 | 16 | </div> |
| 17 | 17 | <!-- 精品推荐 --> |
| 18 | - <div class="skeleton boutique" ref="boutique"> | |
| 18 | + <div :style="{backgroundColor:tabbar[1].color || tabbarBackgroud}" class="skeleton boutique" ref="boutique"> | |
| 19 | 19 | <img-list-box |
| 20 | 20 | v-if="item.style === '12'" |
| 21 | 21 | @detail="toDetail" |
| ... | ... | @@ -41,7 +41,7 @@ |
| 41 | 41 | </style-7> |
| 42 | 42 | </div> |
| 43 | 43 | <!-- 商品推荐 --> |
| 44 | - <div class="skeleton commodity" ref="commodity"> | |
| 44 | + <div :style="{backgroundColor:tabbar[2].color || tabbarBackgroud}" class="skeleton commodity" ref="commodity"> | |
| 45 | 45 | <!--infinite-scroll-immediate-check="true"可避免上拉多次调用接口问题--> |
| 46 | 46 | <div class="column-commodity-list" infinite-scroll-immediate-check="true" v-infinite-scroll="loadCommodity" infinite-scroll-disabled="paging.commodity.loading" :infinite-scroll-distance="paging.distance"> |
| 47 | 47 | <column-commodity-list-box |
| ... | ... | @@ -84,7 +84,7 @@ |
| 84 | 84 | } |
| 85 | 85 | } |
| 86 | 86 | }, |
| 87 | - props:["tabbar"], | |
| 87 | + props:["tabbar","tabbarBackgroud"], | |
| 88 | 88 | components: { |
| 89 | 89 | htmlBox, |
| 90 | 90 | imgListBox, | ... | ... |
src/pages/mall/mall.vue
| ... | ... | @@ -42,7 +42,7 @@ |
| 42 | 42 | :styles="item"> |
| 43 | 43 | </style-7> |
| 44 | 44 | </div> |
| 45 | - <tabBox v-if="tabbar" :tabbar="tabbar"></tabBox> | |
| 45 | + <tabBox v-if="tabbar" :tabbar="tabbar" :tabbarBackgroud="tabbarBackgroud"></tabBox> | |
| 46 | 46 | </div> |
| 47 | 47 | <!-- </van-pull-refresh> --> |
| 48 | 48 | </div> |
| ... | ... | @@ -69,7 +69,8 @@ |
| 69 | 69 | banner:null, // banner |
| 70 | 70 | navs: null, // 导航 |
| 71 | 71 | ads: null, // 列表 |
| 72 | - tabbar:null // tabbar嵌套组件 | |
| 72 | + tabbar:null, // tabbar嵌套组件 | |
| 73 | + tabbarBackgroud:null // 整体tabbar背景 | |
| 73 | 74 | } |
| 74 | 75 | }, |
| 75 | 76 | components:{ |
| ... | ... | @@ -157,6 +158,10 @@ |
| 157 | 158 | if (datas.tabbar && datas.tabbar.length) { |
| 158 | 159 | this.$set(this, "tabbar", datas.tabbar); |
| 159 | 160 | } |
| 161 | + // 设置tabbarBackgroud数据 | |
| 162 | + if (datas.color && datas.color.length) { | |
| 163 | + this.$set(this, "tabbarBackgroud", datas.color); | |
| 164 | + } | |
| 160 | 165 | /* 获取优选库精选活动数据 结束 */ |
| 161 | 166 | |
| 162 | 167 | } else if (res.code == 400) { | ... | ... |