更新记录

1.0.1(2024-05-29)

分段器

1.0.0(2024-05-28)

分段器组件


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

文档 https://www.yuque.com/threenut/xf42fw/in84ml6l8cwq3vln?singleDoc# 《自定义分段器使用》

将组件导入components包下

  1. 使用到的地方导入该组件

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开发; 只在微信小程序测试了其他方式自行测试。

效果

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问