<template> <view class="navigation" :style="[{'height': style_setting.height*2+'rpx', 'height': style_setting.height*2+'rpx'}, style_setting.bg_show ? {'background-image': 'url('+style_setting.bg_url+')'} : null, {'background-color': style_setting.bg_color}]"> <view> <text class="navigation_item" v-for="(item, key) in list" :key="key" v-if="item.goods_type == 0 || (item.goods_type > 0 && goods_type > 0)" > <text class="navigation_text" :style="[{'color': item.title_color}, item.title_bg_show ? {'background-image': 'url('+item.title_bg_url+')'} : '']" @click="$jump(item.link)"> <i v-if="item.title_icon_show" class="navigation_icon" :style="{'background-image': 'url('+item.title_icon_url+')'}"></i> <text v-if="item.title_show">{{item.title}}</text> </text> </text> </view> </view> </template> <script> export default { props: { wrapper_props: { type: Object } }, data() { return { style_setting: this.wrapper_props.style_setting, list: this.wrapper_props.list, goods_type: '-1' //默认不可见 } }, mounted() { const goods_type = this.$getCache('goods_type'); this.goods_type = goods_type; } } </script> <style lang="less" scoped> .navigation { display: flex; align-items: center; white-space: nowrap; overflow-x: auto; background-repeat: no-repeat; background-size: 100% 100%; padding: 0 24rpx; box-sizing: border-box; // border-right: 10rpx solid rgba(0,0,0,0.4); .navigation_item { width: 177.5rpx; display: inline-block; text-align: center; } .navigation_text { background-size: 100% 100%; background-repeat: no-repeat; min-width: 120rpx; height: 48rpx; text-align: center; display: inline-block; font-size: 28rpx; text { vertical-align: middle; } .navigation_icon { display: inline-block; width: 32rpx; height: 32rpx; background-size: 100% 100%; background-repeat: no-repeat; vertical-align: middle; margin-right: 8rpx; } } } .navigation::-webkit-scrollbar { display: none; } </style>