107 lines
2.2 KiB
Vue
107 lines
2.2 KiB
Vue
<template>
|
|
<view class="u-page">
|
|
<view class="u-page__item">
|
|
<u-tabbar :zIndex="99999" :value="thisChecked" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
|
|
activeColor="#FF4D03">
|
|
<template v-for="(item,index) in tabs">
|
|
<u-tabbar-item :key="index" :text="item['title']" :icon="item['icon']" @click="setCurrent(index)"></u-tabbar-item>
|
|
</template>
|
|
</u-tabbar>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapGetters,
|
|
mapMutations
|
|
} from 'vuex'
|
|
export default {
|
|
name: "tabbars",
|
|
data() {
|
|
return {
|
|
tabs: [{
|
|
title: '首页',
|
|
icon: 'home-fill',
|
|
url: '/pages/index/index'
|
|
|
|
},
|
|
{
|
|
title: '分类',
|
|
icon: 'grid-fill',
|
|
url: '/pages/sort/sort'
|
|
},
|
|
{
|
|
title: '购物车',
|
|
icon: 'shopping-cart-fill',
|
|
url: '/pages/myCart/myCart'
|
|
},
|
|
{
|
|
title: '我的',
|
|
icon: 'account-fill',
|
|
url: '/pages/uCenter/uCenter'
|
|
}
|
|
],
|
|
tabbarsHeight: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
thisChecked: 'tabbar/thisChecked',
|
|
}),
|
|
},
|
|
mounted() {
|
|
let self = this;
|
|
// 因为uni-app中的不支持uni.createSelectorQuery支付宝获取元素信息,且支付宝中的my.createSelectorQuery不支持获取组件信息,官方建议将获取信息放在组件内部使用,然后将获取到的元素信息传至父组件
|
|
// #ifdef MP-ALIPAY
|
|
this.$nextTick(() => {
|
|
my.createSelectorQuery()
|
|
.select('.u-tabbar__content').boundingClientRect()
|
|
.selectViewport().scrollOffset().exec((ret) => {
|
|
console.log(ret, '信息2');
|
|
self['tabbarsHeight'] = ret[0]['height']
|
|
})
|
|
})
|
|
// #endif
|
|
},
|
|
watch:{
|
|
thisChecked(val){
|
|
uni.switchTab({
|
|
url: this['tabs'][val]['url']
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
setCurrent: 'tabbar/setCurrent'
|
|
}),
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-page {
|
|
padding: 0;
|
|
|
|
&__item {
|
|
|
|
&__title {
|
|
color: $u-primary;
|
|
background-color: $u-primary;
|
|
padding: 15px;
|
|
font-size: 15px;
|
|
|
|
&__slot-title {
|
|
color: $u-primary;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
&__slot-icon {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|