<template>
|
<view class="">
|
<view class="coreshop-tabbar coreshop-margin-bottom-10" ref="tabBar">
|
<scroll-view scroll-x='true' class="tabbar-list">
|
<view class="tabbar-item" v-for="(item, index) in coreshopdata.parameters.list" :key="index" @click="showSliderInfo(item.linkType, item.linkValue)">
|
{{item.text}}
|
<view class="active-tabbar"></view>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "coreshopTabbar",
|
props: {
|
coreshopdata: {
|
// type: Object,
|
required: true,
|
}
|
},
|
data() {
|
return {
|
searchTop: 0,
|
scrollTop: 0,
|
tabbarFixed: false
|
};
|
},
|
created() {
|
this.searchStyle()
|
},
|
mounted() {
|
},
|
methods: {
|
searchStyle() {
|
this.$store.commit('searchStyle', this.coreshopdata.parameters.style)
|
},
|
handleScroll() {
|
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
this.scrollTop >= this.searchTop ? this.tabbarFixed = true : this.tabbarFixed = false;
|
},
|
goClassify() {
|
this.$u.route({ type: 'switchTab', url: '/pages/category/index/index' });
|
},
|
},
|
onPageScroll() {
|
var _this = this;
|
// #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
|
const query = uni.createSelectorQuery().in(this)
|
query.select('.search').boundingClientRect(function (res) {
|
if (res.top < 0) {
|
_this.tabbarFixed = true;
|
} else {
|
_this.tabbarFixed = false;
|
}
|
}).exec()
|
// #endif
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tabbar-list { padding: 5px 0; background-color: #fff; white-space: nowrap; width: 100%;
|
.tabbar-item { display: inline-block; padding: 5px 10px;
|
.active-tabbar { display: none; }
|
}
|
}
|
.tabbar-item:first-of-type { color: #FF7159;
|
.active-tabbar { display: block; width: 100%; height: 2px; margin: 5px auto 0; background-color: #FF7159; }
|
}
|
.tabbar-fixed { position: fixed; top: 52px; transition: all .5s; z-index: 999; background-color: #fff; width: 100%; }
|
</style>
|
