index.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <view>
  3. <view>
  4. <home v-if="value==0" @goTab="tabbarClick" />
  5. <classification v-show="value==1" @goTab="tabbarClick" />
  6. <shoppingCart v-if="value==2" />
  7. </view>
  8. <uni-fab style="bottom: 100px;" ref="fab" :pattern="pattern" @fabClick="fabClick" :popMenu="false" horizontal="right"/>
  9. <u-tabbar :value="value" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true" activeColor="#fd5003"
  10. inactiveColor="#727272">
  11. <u-tabbar-item text="首页" icon="home-fill" @click="tabbarClick(0)"></u-tabbar-item>
  12. <u-tabbar-item text="商品" icon="grid-fill" @click="tabbarClick(1)"></u-tabbar-item>
  13. <u-tabbar-item text="购物车" icon="shopping-cart-fill" @click="tabbarClick(2)"></u-tabbar-item>
  14. <!-- <u-tabbar-item text="首页" icon="home-fill" @click="tabbarClick(3)"></u-tabbar-item> -->
  15. </u-tabbar>
  16. </view>
  17. </template>
  18. <script>
  19. import home from './home.vue'
  20. import classification from './classification.vue'
  21. import shoppingCart from './shoppingCart.vue'
  22. export default {
  23. components: {
  24. home,
  25. classification,
  26. shoppingCart
  27. },
  28. data() {
  29. return {
  30. value: 0,
  31. pattern: {
  32. icon: 'home-filled',
  33. buttonColor:'#ea4c18'
  34. }
  35. }
  36. },
  37. onLoad(options) {
  38. if (uni.getStorageSync('tabKey')) {
  39. this.tabbarClick(uni.getStorageSync('tabKey'))
  40. uni.removeStorageSync('tabKey')
  41. }
  42. },
  43. methods: {
  44. tabbarClick(tab) {
  45. this.value = tab
  46. },
  47. fabClick(){
  48. uni.switchTab({
  49. url: '/pages/tabBar/home',
  50. })
  51. }
  52. }
  53. }
  54. </script>
  55. <style lang="scss" scoped>
  56. .containerMall {
  57. height: calc(100vh - 85px);
  58. }
  59. </style>