更新记录
1.0.1(2024-05-29)
分段器
1.0.0(2024-05-28)
分段器组件
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
文档 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开发; 只在微信小程序测试了其他方式自行测试。
效果
![](https://cdn.nlark.com/yuque/0/2024/gif/35930831/1716869340506-38d3ff8c-35d3-4d8e-ab54-636d6309aafe.gif#averageHue=%23fbfbfe&clientId=u0dd32b57-8ba5-4&from=drop&id=u6f25283b&originHeight=426&originWidth=190&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=19449&status=done& alt=)