uniapp组件-自定义tab组件_uniapp 卡片样式的tabs

uniapp自定义tab选项卡组件

效果(正常的和滚动的)

代码

<template>
  <view class="custom-tab-com">
    <scroll-view
      :scroll-x="scrollable"
      class="custom-tabs"
      @scroll="scroll"
      scroll-with-animation
      :scroll-left="scrollLeft"
    >
      <view class="in" :style="[customStyle, inStyle]">
        <view
          class="item"
          v-for="(item, index) in list"
          @click="tabClick(item)"
          :class="[`item-${index}`, { selected: item.value === tabValue }]"
          :style="[getItemStyle(item.value === tabValue), itemStyle]"
          :key="index"
        >
          {{ item.name }}
        </view>
        <view
          v-show="showLine"
          class="active-item"
          :style="[{ left: left + 'px' }, customLineStyle]"
        ></view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'CustomTab',
  components: {},
  props: {
    list: {
      type: Array,
      default: () => {
        // {
        //     name:'',
        //     value:''
        // }
        return []
      },
    },
    modelValue: {
      type: String,
      default: '',
    },
    scrollable: {
      type: Boolean,
      default: true,
    },
    // 线条宽度 单位rpx
    lineWidth: {
      type: String,
      default: '',
    },
    // 线条高度 单位rpx
    lineHeight: {
      type: String,
      default: '',
    },
    // 线条颜色
    lineColor: {
      type: String,
      default: '',
    },
    //  item得样式
    itemStyle: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // class为in得样式
    customStyle: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 选中得样式
    activeStyle: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 未选择得样式
    inactiveStyle: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 居中方式,scrollable 和这个属性不能共用
    justifyContent: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
  data() {
    return {
      domList: {},
      faDom: {},
      listDom: [],
      left: 0,
      showLine: false,
      scrollDetail: {},
      scrollLeft: 0,
      scrollWidth: 0,
    }
  },
  emits: ['update:modelValue', 'change'],
  computed: {
    tabValue: {
      get() {
        return this.modelValue || ''
      },
      set(newValue) {
        this.$emit('update:modelValue', newValue)
      },
    },
    customLineStyle() {
      let style = {}
      if (this.lineWidth) {
        style['width'] = this.lineWidth + 'rpx'
      }
      if (this.lineHeight) {
        style['height'] = this.lineHeight + 'rpx'
      }
      if (this.lineColor) {
        style['background'] = this.lineColor
      }
      return style
    },
    inStyle() {
      let style = {}
      if (this.justifyContent) {
        style['justify-content'] = this.justifyContent
      }
      return style
    },
  },
  watch: {
    list: {
      deep: true,
      immediate: true,
      handler(val) {
        if (!val) return
        this.$nextTick(() => {
          this.showLine = false
          this.init(val)
        })
      },
    },
  },
  mounted() {},
  created() {},
  methods: {
    async init(val) {
      const query = uni.createSelectorQuery().in(this)
      // 父元素
      this.faDom = await this.selectQuery(query, `.custom-tab-com`)
      const promiseAllArr = val.map((item, index) => {
        return this.selectQuery(query, `.item-${index}`)
      })
      // 子元素列表
      this.listDom = await Promise.all(promiseAllArr)
      this.listDom.forEach(item => {
        // 计算这个scroll的总宽度
        this.scrollWidth += item.width
      })
      if (this.listDom.length > 0) {
        this.moveLine(this.tabValue)
        this.moveScroll(this.tabValue)
      }
    },
    selectQuery(query, className) {
      return new Promise(resolve => {
        query
          .select(className)
          .boundingClientRect(data => {
            resolve(data)
          })
          .exec()
      })
    },
    tabClick(item) {
      this.tabValue = item.value
       this.$emit('change', item)
      this.moveLine(item.value)
      this.moveScroll(item.value)
    },
    // 移动线
    moveLine(val) {
      // 判断当前选中的是第几个
      const index = this.list.findIndex(item => {
        return item.value === val
      })
    
      this.showLine = true
        this.listDom[index].left +
        this.listDom[index].width / 2 -
        this.faDom.left
    },
    // 移动scroll
    moveScroll(val) {
      if (!this.scrollable) return
      // 判断当前选中的是第几个
      const index = this.list.findIndex(item => {
        return item.value === val
      })
      let scrollLeftWidth = this.listDom
        .slice(0, index)
        .reduce((total, curr) => total + curr.width, 0)
      const max = this.scrollWidth - this.faDom.width

      let scrollLeft =
        scrollLeftWidth - (this.faDom.width - this.listDom[index].width) / 2
      scrollLeft = Math.min(scrollLeft, max)
      this.scrollLeft = Math.max(0, scrollLeft)
    },
    getItemStyle(judge) {
      return judge ? this.activeStyle : this.inactiveStyle
    },
    scroll(e) {
      this.scrollDetail = e.detail
    },
  },
}
</script>
<style lang="scss" scoped>
.custom-tab-com {
  width: 100%;
  position: relative;
}
.custom-tabs {
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  .in {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    height: 50rpx;
  }
  .item {
    // flex: 1;
    height: 42rpx;
    padding: 0 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
  }
}
.active-item {
  position: absolute;
  bottom: 0;
  left: 27px;
  width: 20px;
  transform: translateX(-50%);
  transition-duration: 300ms;
  height: 6rpx;
  // background: #3c9cff;
  background-size: cover;
}
</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275

如何使用(滚动的代码只是把数组里面多添加了几个)

const tabs = [
  {
    name: '标签一',
    value: 'one',
  },
  {
    name: '标签二',
    value: 'two',
  },
  {
    name: '标签三',
    value: 'three',
  },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<custom-tab
            v-model="_this.courseType"
            @change="tabsClick"
            :list="tabs"
            :scrollable="false"
            line-width="54"
            line-height="8"
            :item-style="{
              height: '46rpx',
            }"
            :custom-style="{
              height: '46rpx',
            }"
            :activeStyle="{
              color: '#3D3D3D',
              'font-family': '思源黑体500',
              'font-size': '32rpx',
            }"
            :inactiveStyle="{
              color: '#767676',
              'font-size': '32rpx',
              'font-family': '思源黑体',
            }"
            lineColor="linear-gradient(90deg, #4FB0FE 0%, rgba(255, 255, 255, 0) 100%);"
          ></custom-tab>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

如果你想让文字和下面的线条之间的间距大一点,你可以在itemStyle 和 customStyle 设置高度, customStyle 减去 itemStyle 的高度差就是文字和线条的间距,

切记,不要在 customStyle 和 itemStyle 里面写margin,如果你想让两个tabItem之间的间距大一点,可以设置padding,或者你在源码里面修改

设置了横向滚动之后,justifyContent 这个属性就不要在设置了

线条过渡的时间我没有添加,给的300ms,如果你想修改可以自己添加props来修改

如果你的标签少不需要左右滚动的话,你需要把scrollable设置为false

有bug的话,欢迎在评论区指出