├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md └── z-tabs ├── .hbuilderx └── launch.json ├── App.vue ├── index.html ├── main.js ├── manifest.json ├── pages.json ├── pages ├── index-nvue │ └── index-nvue.nvue └── index │ └── index.vue ├── static └── logo.png ├── uni.scss └── uni_modules └── z-tabs ├── changelog.md ├── components └── z-tabs │ ├── config │ └── index.js │ └── z-tabs.vue ├── package.json └── readme.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | build/* 3 | !build/icons 4 | npm-debug.log 5 | npm-debug.log.* 6 | yarn.lock 7 | thumbs.db 8 | !.gitkeep 9 | unpackage/* 10 | /z-tabs/unpackage 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 v-zhaoxiang.li 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # uni-z-tabs 2 | [![version](https://img.shields.io/badge/version-0.2.5-blue)](https://github.com/SmileZXLee/uni-z-tabs) 3 | [![license](https://img.shields.io/github/license/SmileZXLee/uni-z-tabs)](https://en.wikipedia.org/wiki/MIT_License) 4 | 5 | > 【基于uni-app】一个简单轻量的tabs标签，全平台兼容，支持nvue、vue3 6 | 7 | ## 在DCloud插件市场中访问：[https://ext.dcloud.net.cn/plugin?name=z-tabs](https://ext.dcloud.net.cn/plugin?name=z-tabs) 8 | 9 | ## 预览 10 | ![Image text](http://www.zxlee.cn/github/uni-z-tabs/p1.png?x-oss-process=image/resize,h_700,m_lfit) 11 | ![Image text](http://www.zxlee.cn/github/uni-z-tabs/p2.gif?x-oss-process=image/resize,h_700,m_lfit) 12 | 13 | ## 更新日志 14 | [点击查看](https://ext.dcloud.net.cn/plugin?id=8308&update_log) 15 | -------------------------------------------------------------------------------- /z-tabs/.hbuilderx/launch.json: -------------------------------------------------------------------------------- 1 | { // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/ 2 | // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数 3 | "version": "0.0", 4 | "configurations": [{ 5 | "app-plus" : 6 | { 7 | "launchtype" : "local" 8 | }, 9 | "default" : 10 | { 11 | "launchtype" : "local" 12 | }, 13 | "mp-weixin" : 14 | { 15 | "launchtype" : "local" 16 | }, 17 | "type" : "uniCloud" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /z-tabs/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /z-tabs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /z-tabs/main.js: -------------------------------------------------------------------------------- 1 | import App from './App' 2 | 3 | // #ifndef VUE3 4 | import Vue from 'vue' 5 | Vue.config.productionTip = false 6 | App.mpType = 'app' 7 | const app = new Vue({ 8 | ...App 9 | }) 10 | app.$mount() 11 | // #endif 12 | 13 | // #ifdef VUE3 14 | import { createSSRApp } from 'vue' 15 | export function createApp() { 16 | const app = createSSRApp(App) 17 | return { 18 | app 19 | } 20 | } 21 | // #endif -------------------------------------------------------------------------------- /z-tabs/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name" : "z-tabs", 3 | "appid" : "__UNI__BBB98D1", 4 | "description" : "", 5 | "versionName" : "1.0.0", 6 | "versionCode" : "100", 7 | "transformPx" : false, 8 | /* 5+App特有相关 */ 9 | "app-plus" : { 10 | "usingComponents" : true, 11 | "nvueStyleCompiler" : "uni-app", 12 | "compilerVersion" : 3, 13 | "splashscreen" : { 14 | "alwaysShowBeforeRender" : true, 15 | "waiting" : true, 16 | "autoclose" : true, 17 | "delay" : 0 18 | }, 19 | /* 模块配置 */ 20 | "modules" : {}, 21 | /* 应用发布信息 */ 22 | "distribute" : { 23 | /* android打包配置 */ 24 | "android" : { 25 | "permissions" : [ 26 | "", 27 | "", 28 | "", 29 | "", 30 | "", 31 | "", 32 | "", 33 | "", 34 | "", 35 | "", 36 | "", 37 | "", 38 | "", 39 | "", 40 | "" 41 | ] 42 | }, 43 | /* ios打包配置 */ 44 | "ios" : {}, 45 | /* SDK配置 */ 46 | "sdkConfigs" : {} 47 | } 48 | }, 49 | /* 快应用特有相关 */ 50 | "quickapp" : {}, 51 | /* 小程序特有相关 */ 52 | "mp-weixin" : { 53 | "appid" : "", 54 | "setting" : { 55 | "urlCheck" : false 56 | }, 57 | "usingComponents" : true 58 | }, 59 | "mp-alipay" : { 60 | "usingComponents" : true 61 | }, 62 | "mp-baidu" : { 63 | "usingComponents" : true 64 | }, 65 | "mp-toutiao" : { 66 | "usingComponents" : true 67 | }, 68 | "uniStatistics" : { 69 | "enable" : false 70 | }, 71 | "vueVersion" : "3" 72 | } 73 | -------------------------------------------------------------------------------- /z-tabs/pages.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages 3 | { 4 | "path": "pages/index/index", 5 | "style": { 6 | "navigationBarTitleText": "z-tabs(vue)" 7 | } 8 | } 9 | ,{ 10 | "path" : "pages/index-nvue/index-nvue", 11 | "style" : 12 | { 13 | "navigationBarTitleText": "z-tabs(nvue)", 14 | "enablePullDownRefresh": false 15 | } 16 | 17 | } 18 | ], 19 | "globalStyle": { 20 | "navigationBarTextStyle": "black", 21 | "navigationBarTitleText": "z-tabs", 22 | "navigationBarBackgroundColor": "#F8F8F8", 23 | "backgroundColor": "#F8F8F8" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /z-tabs/pages/index-nvue/index-nvue.nvue: -------------------------------------------------------------------------------- 1 | 80 | 81 | 170 | 171 | 200 | -------------------------------------------------------------------------------- /z-tabs/pages/index/index.vue: -------------------------------------------------------------------------------- 1 | 91 | 92 | 180 | 181 | 223 | -------------------------------------------------------------------------------- /z-tabs/static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmileZXLee/uni-z-tabs/38ef388d1607adc2988b5558465f065623c90a61/z-tabs/static/logo.png -------------------------------------------------------------------------------- /z-tabs/uni.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 这里是uni-app内置的常用样式变量 3 | * 4 | * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 5 | * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App 6 | * 7 | */ 8 | 9 | /** 10 | * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 11 | * 12 | * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 13 | */ 14 | 15 | /* 颜色变量 */ 16 | 17 | /* 行为相关颜色 */ 18 | $uni-color-primary: #007aff; 19 | $uni-color-success: #4cd964; 20 | $uni-color-warning: #f0ad4e; 21 | $uni-color-error: #dd524d; 22 | 23 | /* 文字基本颜色 */ 24 | $uni-text-color:#333;//基本色 25 | $uni-text-color-inverse:#fff;//反色 26 | $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息 27 | $uni-text-color-placeholder: #808080; 28 | $uni-text-color-disable:#c0c0c0; 29 | 30 | /* 背景颜色 */ 31 | $uni-bg-color:#ffffff; 32 | $uni-bg-color-grey:#f8f8f8; 33 | $uni-bg-color-hover:#f1f1f1;//点击状态颜色 34 | $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 35 | 36 | /* 边框颜色 */ 37 | $uni-border-color:#c8c7cc; 38 | 39 | /* 尺寸变量 */ 40 | 41 | /* 文字尺寸 */ 42 | $uni-font-size-sm:12px; 43 | $uni-font-size-base:14px; 44 | $uni-font-size-lg:16; 45 | 46 | /* 图片尺寸 */ 47 | $uni-img-size-sm:20px; 48 | $uni-img-size-base:26px; 49 | $uni-img-size-lg:40px; 50 | 51 | /* Border Radius */ 52 | $uni-border-radius-sm: 2px; 53 | $uni-border-radius-base: 3px; 54 | $uni-border-radius-lg: 6px; 55 | $uni-border-radius-circle: 50%; 56 | 57 | /* 水平间距 */ 58 | $uni-spacing-row-sm: 5px; 59 | $uni-spacing-row-base: 10px; 60 | $uni-spacing-row-lg: 15px; 61 | 62 | /* 垂直间距 */ 63 | $uni-spacing-col-sm: 4px; 64 | $uni-spacing-col-base: 8px; 65 | $uni-spacing-col-lg: 12px; 66 | 67 | /* 透明度 */ 68 | $uni-opacity-disabled: 0.3; // 组件禁用态的透明度 69 | 70 | /* 文章场景相关 */ 71 | $uni-color-title: #2C405A; // 文章标题颜色 72 | $uni-font-size-title:20px; 73 | $uni-color-subtitle: #555555; // 二级标题颜色 74 | $uni-font-size-subtitle:26px; 75 | $uni-color-paragraph: #3F536E; // 文章段落颜色 76 | $uni-font-size-paragraph:15px; 77 | -------------------------------------------------------------------------------- /z-tabs/uni_modules/z-tabs/changelog.md: -------------------------------------------------------------------------------- 1 | ## 0.3.0（2024-10-21） 2 | 支持鸿蒙Next 3 | ## 0.2.7（2024-07-18） 4 | 1.`新增` 支持切换rpx&px 5 | 2.`修复` 宽度小于屏幕时底部tabs位置不正确的问题 6 | 3.`修复` 偶现的Cannot read property 'left' of undefind的问题 7 | 8 | ## 0.2.5（2023-01-09） 9 | 修复可能出现的可能出现的与swiper联动时报错node不存在的bug 10 | -------------------------------------------------------------------------------- /z-tabs/uni_modules/z-tabs/components/z-tabs/config/index.js: -------------------------------------------------------------------------------- 1 | // z-tabs全局配置文件，注意避免更新时此文件被覆盖，若被覆盖，可在此文件中右键->点击本地历史记录，找回覆盖前的配置 2 | export default { 3 | 4 | } -------------------------------------------------------------------------------- /z-tabs/uni_modules/z-tabs/components/z-tabs/z-tabs.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 44 | 45 | 659 | 660 | 791 | 792 | -------------------------------------------------------------------------------- /z-tabs/uni_modules/z-tabs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "z-tabs", 3 | "name": "z-tabs", 4 | "displayName": "【z-tabs】一个简单轻量的tabs组件", 5 | "version": "0.3.0", 6 | "description": "全平台兼容，支持nvue、vue3", 7 | "keywords": [ 8 | "tabs" 9 | ], 10 | "repository": "https://github.com/SmileZXLee/uni-z-tabs", 11 | "engines": { 12 | "HBuilderX": "^3.0.7" 13 | }, 14 | "dcloudext": { 15 | "sale": { 16 | "regular": { 17 | "price": "0.00" 18 | }, 19 | "sourcecode": { 20 | "price": "0.00" 21 | } 22 | }, 23 | "contact": { 24 | "qq": "393727164" 25 | }, 26 | "declaration": { 27 | "ads": "无", 28 | "data": "无", 29 | "permissions": "无" 30 | }, 31 | "npmurl": "https://www.npmjs.com/package/@zxlee/z-tabs", 32 | "type": "component-vue" 33 | }, 34 | "uni_modules": { 35 | "dependencies": [], 36 | "encrypt": [], 37 | "platforms": { 38 | "cloud": { 39 | "tcb": "y", 40 | "aliyun": "y", 41 | "alipay": "n" 42 | }, 43 | "client": { 44 | "App": { 45 | "app-vue": "y", 46 | "app-nvue": "y" 47 | }, 48 | "H5-mobile": { 49 | "Safari": "y", 50 | "Android Browser": "y", 51 | "微信浏览器(Android)": "y", 52 | "QQ浏览器(Android)": "y" 53 | }, 54 | "H5-pc": { 55 | "Chrome": "y", 56 | "IE": "y", 57 | "Edge": "y", 58 | "Firefox": "y", 59 | "Safari": "y" 60 | }, 61 | "小程序": { 62 | "微信": "y", 63 | "阿里": "y", 64 | "百度": "y", 65 | "字节跳动": "y", 66 | "QQ": "y", 67 | "钉钉": "y", 68 | "快手": "y", 69 | "飞书": "y", 70 | "京东": "y" 71 | }, 72 | "快应用": { 73 | "华为": "y", 74 | "联盟": "y" 75 | }, 76 | "Vue": { 77 | "vue2": "y", 78 | "vue3": "y" 79 | } 80 | } 81 | } 82 | } 83 | } -------------------------------------------------------------------------------- /z-tabs/uni_modules/z-tabs/readme.md: -------------------------------------------------------------------------------- 1 | # z-tabs 2 | 3 | [![version](https://img.shields.io/badge/version-0.3.0-blue)](https://github.com/SmileZXLee/uni-z-tabs) 4 | [![license](https://img.shields.io/github/license/SmileZXLee/uni-z-tabs)](https://en.wikipedia.org/wiki/MIT_License) 5 | 6 | *** 7 | 8 | ### 反馈qq群(点击加群)：[371624008](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=avPmibADf2TNi4LxkIwjCE5vbfXpa-r1&authKey=dQ%2FVDAR87ONxI4b32Py%2BvmXbhnopjHN7%2FJPtdsqJdsCPFZB6zDQ17L06Uh0kITUZ&noverify=0&group_code=371624008) 9 | 10 | *** 11 | 12 | ## z-tabs文档 13 | 14 | ### 安装 15 | 16 | #### 方式1(推荐)：通过uni_modules安装，在插件市场中点击右上角【使用HbuilderX导入插件】即可。 17 | 18 | *** 19 | 20 | #### 方式2：通过npm安装 21 | 22 | ```bash 23 | //若项目之前未使用npm管理依赖（项目根目录下无package.json文件），先在项目根目录执行命令初始化npm工程 24 | npm init -y 25 | 26 | //安装 27 | npm install @zxlee/z-tabs --save 28 | //更新 29 | npm update @zxlee/z-tabs 30 | ``` 31 | 32 | 然后在`pages.json`中配置`easycom`(注意：下方配置只有在使用npm安装时才需要配置！！！！！) 33 | 34 | ```json 35 | "easycom": { 36 | "^z-tabs": "@zxlee/z-tabs/components/z-tabs/z-tabs.vue" 37 | } 38 | ``` 39 | 40 | ### 基本使用 41 | 42 | ```html 43 | 46 | 47 | 75 | ``` 76 | 77 | 78 | 79 | ### props 80 | 81 | | 参数 | 说明 | 类型 | 默认值 | 可选值 | 82 | | :------------------ | :----------------------------------------------------------- | :------------- | :------ | :----- | 83 | | list | 数据源数组，支持形如`['tab1','tab2']`的格式或`[{name:'tab1',value:1}]`的格式 | Array | [] | - | 84 | | current | 当前选中的index | Number\|String | 0 | - | 85 | | scroll-count | list数组长度超过scrollCount时滚动显示(不自动铺满全屏) | Number\|String | 5 | - | 86 | | tab-width | 自定义每个tab的宽度，默认为0，即代表根据内容自动撑开，单位rpx，支持传100、"100px"或"100rpx" | Number\|String | 0 | 0 | 87 | | bar-width | 滑块宽度，单位rpx，支持传100、"100px"或"100rpx" | Number\|String | 45rpx | - | 88 | | bar-height | 滑块高度，单位rpx，支持传100、"100px"或"100rpx" | Number\|String | 8rpx | - | 89 | | bar-style | 滑块样式，其中的`width`和`height`将被`bar-width`和`bar-height`覆盖 | Object | {} | - | 90 | | bottom-space | tabs与底部的间距，单位rpx，支持传100、"100px"或"100rpx" | Number\|String | 8rpx | - | 91 | | bar-animate-mode | 【v0.1.5起支持】切换tab时滑块动画模式，与`swiper`联动时有效，点击切换tab时无效，必须调用`setDx`。默认为`line`，即切换tab时滑块宽度保持不变，线性运动。可选值为`worm`，即为类似毛毛虫蠕动效果 | String | line | worm | 92 | | name-key | list中item的name(标题)的key | String | name | - | 93 | | value-key | list中item的value的key | String | value | - | 94 | | active-color | 激活状态tab的颜色 | String | #007AFF | - | 95 | | inactive-color | 未激活状态tab的颜色 | String | #666666 | - | 96 | | disabled-color | 禁用状态tab的颜色 | String | #bbbbbb | - | 97 | | active-style | 激活状态tab的样式 | Object | {} | - | 98 | | inactive-style | 未激活状态tab的样式 | Object | {} | - | 99 | | disabled-style | 禁用状态tab的样式 | Object | {} | - | 100 | | badge-max-count | 徽标数最大数字限制，超过这个数字将变成`badge-max-count`+ | Number\|String | 99 | - | 101 | | badge-style | 徽标样式，例如可自定义背景色，字体等等 | Object | {} | - | 102 | | bg-color | z-tabs背景色 | String | white | - | 103 | | tabs-style | z-tabs样式 | Object | {} | - | 104 | | init-trigger-change | 初始化时是否自动触发change事件 | Boolean | true | false | 105 | | unit | z-tabs中布局的单位，默认为rpx | String | rpx | px | 106 | 107 | 108 | 109 | ### events 110 | 111 | | 事件名 | 说明 | 回调参数 | 112 | | ------------ | -------------------- | ------------------------------------------------------------ | 113 | | @change | tabs改变(点击)时触发 | `参数1`:index(当前切换到的index)；
`参数2`:value(当前切换到的value) | 114 | | @secondClick | tabs二次点击时触发 | `参数1`:index(当前切换到的index)；
`参数2`:value(当前切换到的value) | 115 | 116 | ### methods 117 | 118 | | 方法名 | 说明 | 参数 | 119 | | ------------------- | ------------------------------------------------------------ | -------------------------------------- | 120 | | setDx | 根据swiper的`@transition`实时更新底部dot位置 | swiper的`@transition`中的`e.detail.dx` | 121 | | unlockDx | 在swiper的`@animationfinish`中通知`z-tabs`结束多`setDx`的锁定，若在父组件中调用了`setDx`，则必须调用`unlockDx` | - | 122 | | updateSubviewLayout | 在nvue+安卓中，若在cell中使用`z-tabs`，且页面加载时cell在屏幕之外，因cell的复用机制，可能导致`z-tabs`内部的布局失效：例如底部bar无法显示，此时可在list滚动到一定区域内(例如快显示`z-tabs`)的时候调用此方法以更新其内部布局。其他情况无需调用！ | - | 123 | 124 | ### slots 125 | 126 | | 名称 | 说明 | 127 | | :---- | ------------ | 128 | | left | tabs左侧插槽 | 129 | | right | tabs右侧插槽 | 130 | 131 | ### 支持全局配置 132 | 133 | * 在`/z-tabs/components/z-tabs/config/index.js`文件中进行配置 134 | 135 | ```js 136 | export default { 137 | 'active-color': 'red' 138 | } 139 | ``` 140 | 141 | ### 【v0.1.4起支持】底部dot与swiper联动演示 142 | 143 | ```html 144 |