12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- <template>
- <view>
- <view>
- <home v-if="value==0" @goTab="tabbarClick" />
- <classification v-show="value==1" @goTab="tabbarClick" />
- <shoppingCart v-if="value==2" />
- </view>
- <uni-fab style="bottom: 100px;" ref="fab" :pattern="pattern" @fabClick="fabClick" :popMenu="false" horizontal="right"/>
- <u-tabbar :value="value" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true" activeColor="#fd5003"
- inactiveColor="#727272">
- <u-tabbar-item text="首页" icon="home-fill" @click="tabbarClick(0)"></u-tabbar-item>
- <u-tabbar-item text="商品" icon="grid-fill" @click="tabbarClick(1)"></u-tabbar-item>
- <u-tabbar-item text="购物车" icon="shopping-cart-fill" @click="tabbarClick(2)"></u-tabbar-item>
- <!-- <u-tabbar-item text="首页" icon="home-fill" @click="tabbarClick(3)"></u-tabbar-item> -->
- </u-tabbar>
- </view>
- </template>
- <script>
- import home from './home.vue'
- import classification from './classification.vue'
- import shoppingCart from './shoppingCart.vue'
- export default {
- components: {
- home,
- classification,
- shoppingCart
- },
- data() {
- return {
- value: 0,
- pattern: {
- icon: 'home-filled',
- buttonColor:'#ea4c18'
- }
- }
- },
- onLoad(options) {
- if (uni.getStorageSync('tabKey')) {
- this.tabbarClick(uni.getStorageSync('tabKey'))
- uni.removeStorageSync('tabKey')
- }
- },
- methods: {
- tabbarClick(tab) {
- this.value = tab
- },
- fabClick(){
- uni.switchTab({
- url: '/pages/tabBar/home',
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .containerMall {
- height: calc(100vh - 85px);
- }
- </style>
|