更新记录
1.0.4(2023-07-10) 下载此版本
改名字
1.0.3(2023-07-10) 下载此版本
优化了一下,提供了更多的参数进行定制化
1.0.2(2023-07-10) 下载此版本
插件名称写错了,重新配下
查看更多平台兼容性
uni-app
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| × | √ | - | - | - | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| - | - | - | - | - | - | - | - | - | - | - |
插件使用方法:
<xjm-tabs :tabsList="typs" @tabsChange="tabsChange"></xjm-tabs>
配置参数:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| tabsList | Array | [] | 展示的tabs选项数组 |
| showKeyStr | String | 'typeCn' | 展示数组里对象的哪个字段 |
| showBottomLine | Boolean | true | 是否显示底部横线 |
| bottomColor | String | '#26b3a0' | 底部横线的颜色 |
事件:
| 事件名 | 说明 | 返回值 |
|---|---|---|
| @tabsChange | 切换选项触发的函数 | 参数 (选中的对象) |
说明:
此插件依赖scss,请务必安装!!!
示例:
<template>
<view class="content">
<xjm-tabs :tabsList="typs" @tabsChange="tabsChange"></xjm-tabs>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
let typs = reactive([{"id":"25","typeCn":"创作"},{"id":"26","typeCn":"学习"}]);
const tabsChange = (item) => {
console.log(item);
};
</script>

收藏人数:
下载插件并导入HBuilderX
赞赏(0)
下载 43
赞赏 0
下载 11035362
赞赏 1800
赞赏
京公网安备:11010802035340号