index.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template>
  2. <view class="content">
  3. <navBar>
  4. <text slot="title">产品手册</text>
  5. </navBar>
  6. <view class="tab">
  7. <view
  8. :class="['tab-item', isTab(item.id)]"
  9. v-for="item in tab"
  10. :key="item.id"
  11. @click="getTab(item.id)"
  12. >{{ item.label }}</view
  13. >
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. import navBar from "@/components/navbar/navbar";
  19. export default {
  20. components: {
  21. navBar,
  22. },
  23. data() {
  24. return {
  25. tab: [
  26. {
  27. id: 1,
  28. label: "全部",
  29. },
  30. {
  31. id: 2,
  32. label: "蓝牙设备",
  33. },
  34. {
  35. id: 3,
  36. label: "4G/Wi-Fi设备",
  37. },
  38. ],
  39. tabActive: 1,
  40. };
  41. },
  42. methods: {
  43. isTab(id) {
  44. return this.tabActive == id
  45. ? "font-size-lg"
  46. : "font-size-sm text-color-grey";
  47. },
  48. getTab(id) {
  49. this.tabActive = id;
  50. },
  51. },
  52. };
  53. </script>
  54. <style lang="scss" scope>
  55. .tab {
  56. display: flex;
  57. align-items: center;
  58. .tab-item {
  59. margin-right: 48rpx;
  60. }
  61. }
  62. </style>