1、效果图2、完整代码template view classwrap view classtab_box view classtab_item :class{ active: tabIndex index } v-for(item, index) in tabList :keyindex clickchangeTab(index) {{ item.name }} /view /view /view /template script export default { data() { return { tabIndex: 1, tabList: [ { name: 测试1, id: 1, }, { name: 测试2, id: 2, }, { name: 测试3, id: 3, }, ], }; }, methods: { changeTab(index) { this.tabIndex index; }, }, }; /script style langscss scoped .wrap { padding: 50rpx 30rpx; .tab_box { $tabRidio: 60rpx;//弧形的大小 $acriveTopRidio: 30rpx;//激活态顶部圆角的大小 display: flex; align-items: flex-end; justify-content: space-between; height: 100rpx; border-radius: 24rpx 24rpx 0rpx 0rpx; color: #383838; font-size: 30rpx; // 激活态默认为中间形态:两侧弧形 顶部全圆角; // 首/末个 tab 贴边一侧无相邻项,再按结构伪类裁掉对应弧形 .tab_item.active { height: 110rpx; line-height: 110rpx; background: #fff; font-weight: bold; position: relative; border-radius: $acriveTopRidio $acriveTopRidio 0 0; // 右侧弧形,盖在右侧相邻 tab 上 ::after { position: absolute; content: ; width: $tabRidio; height: $tabRidio; right: -$tabRidio; bottom: 0; z-index: 10; background: radial-gradient( circle at $tabRidio 0, transparent $tabRidio, #fff $tabRidio ); } // 左侧弧形,盖在左侧相邻 tab 上 ::before { position: absolute; content: ; width: $tabRidio; height: $tabRidio; bottom: 0; left: -$tabRidio; background: radial-gradient( circle at 0 0, transparent $tabRidio, #fff $tabRidio ); } // 首个 tab 左侧贴边,去左弧 :first-child::before { content: none; } // 末个 tab 右侧贴边,去右弧且右上角不圆角 :last-child { border-top-right-radius: 0; ::after { content: none; } } } .tab_item { position: relative; flex-grow: 1; text-align: center; line-height: 87rpx; background: #f2ece0; // 弧形伪元素仅作装饰,需放行点击穿透到下层相邻 tab, // 否则弧形盖住的相邻 tab 两侧区域会命中当前 active tab,表现为点击无效 ::before, ::after { pointer-events: none; } } } } /style
1、效果图2、完整代码template view classwrap view classtab_box view classtab_item :class{ active: tabIndex index } v-for(item, index) in tabList :keyindex clickchangeTab(index) {{ item.name }} /view /view /view /template script export default { data() { return { tabIndex: 1, tabList: [ { name: 测试1, id: 1, }, { name: 测试2, id: 2, }, { name: 测试3, id: 3, }, ], }; }, methods: { changeTab(index) { this.tabIndex index; }, }, }; /script style langscss scoped .wrap { padding: 50rpx 30rpx; .tab_box { $tabRidio: 60rpx;//弧形的大小 $acriveTopRidio: 30rpx;//激活态顶部圆角的大小 display: flex; align-items: flex-end; justify-content: space-between; height: 100rpx; border-radius: 24rpx 24rpx 0rpx 0rpx; color: #383838; font-size: 30rpx; // 激活态默认为中间形态:两侧弧形 顶部全圆角; // 首/末个 tab 贴边一侧无相邻项,再按结构伪类裁掉对应弧形 .tab_item.active { height: 110rpx; line-height: 110rpx; background: #fff; font-weight: bold; position: relative; border-radius: $acriveTopRidio $acriveTopRidio 0 0; // 右侧弧形,盖在右侧相邻 tab 上 ::after { position: absolute; content: ; width: $tabRidio; height: $tabRidio; right: -$tabRidio; bottom: 0; z-index: 10; background: radial-gradient( circle at $tabRidio 0, transparent $tabRidio, #fff $tabRidio ); } // 左侧弧形,盖在左侧相邻 tab 上 ::before { position: absolute; content: ; width: $tabRidio; height: $tabRidio; bottom: 0; left: -$tabRidio; background: radial-gradient( circle at 0 0, transparent $tabRidio, #fff $tabRidio ); } // 首个 tab 左侧贴边,去左弧 :first-child::before { content: none; } // 末个 tab 右侧贴边,去右弧且右上角不圆角 :last-child { border-top-right-radius: 0; ::after { content: none; } } } .tab_item { position: relative; flex-grow: 1; text-align: center; line-height: 87rpx; background: #f2ece0; // 弧形伪元素仅作装饰,需放行点击穿透到下层相邻 tab, // 否则弧形盖住的相邻 tab 两侧区域会命中当前 active tab,表现为点击无效 ::before, ::after { pointer-events: none; } } } } /style
