简洁的分段器

环境 小程序开发 vue3 + ts

下载《自定义分段器使用》

将组件导入components包下

.

使用到的地方导入该组件

import SegmentedControl from '@/components/segmented-control.vue'

<script setup lang="ts">
const selectIndex = (index: number) => {
  console.log('当前点击的index')
}
  
</script>
  <template>
    <view style="margin: 20rpx">
        <segmented-control @selectIndex="selectIndex" :labels="[1,2,3]"/>
    </view>
</template>

属性说明

属性	类型	说明
labels	array	分段器文字
@selectIndex	事件	点击后返回的索引值

1. 响应式布局, 适配pad了, 注意左右边距20rpx; 也可自行调试合适的边距
2. 直接放到components下直接使用, vue3 typescript开发; 只在微信小程序测试了其他方式自行测试。