更新记录
1.0.1(2024-05-29) 下载此版本
分段器
1.0.0(2024-05-28) 下载此版本
分段器组件
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
× | √ | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
文档 https://www.yuque.com/threenut/xf42fw/in84ml6l8cwq3vln?singleDoc# 《自定义分段器使用》
将组件导入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 | 事件 | 点击后返回的索引值 |
- 响应式布局, 适配pad了, 注意左右边距20rpx; 也可自行调试合适的边距
- 直接放到components下直接使用, vue3 typescript开发; 只在微信小程序测试了其他方式自行测试。
效果