江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

57 lines
1.2 KiB

1 year ago
  1. <template>
  2. <scroll-view class="scroll-view_w" scroll-x="true" scroll-with-animation :scroll-into-view="'tab'+currentTab" scroll-left="140">
  3. <view class="tabs">
  4. <view class="tab" v-for="(item,index) in tabData" :key="index" @click="changeTab(item.id)" :class="{active: currentTab==item.id}" :id="'tab'+item.id">{{ item.text }}</view>
  5. <view class="rightPad"></view>
  6. </view>
  7. </scroll-view>
  8. </template>
  9. <script>
  10. export default {
  11. props: ['tabData', 'currentTab'],
  12. methods: {
  13. changeTab(id) {
  14. this.$emit('changeTab', id)
  15. },
  16. }
  17. }
  18. </script>
  19. <style lang="scss" scoped>
  20. .scroll-view_w {
  21. width: 100%;
  22. margin: 30rpx 0 40rpx 0;
  23. .tabs {
  24. display: flex;
  25. flex-wrap: nowrap;
  26. padding: 0 0rpx 10rpx 32rpx;
  27. width: auto;
  28. .tab {
  29. width: 108rpx;
  30. height: 60rpx;
  31. border-radius: 8rpx;
  32. border: 2rpx solid #FFFFFF;
  33. font-size: 28rpx;
  34. color: #fff;
  35. text-align: center;
  36. line-height: 60rpx;
  37. margin-right: 28rpx;
  38. flex-shrink: 0;
  39. &.active {
  40. background-color: #fff;
  41. color: $themC;
  42. }
  43. &.all {
  44. width: 96rpx;
  45. }
  46. }
  47. .rightPad {
  48. min-width: 10rpx;
  49. height: 60rpx;
  50. }
  51. }
  52. }
  53. </style>