## 插件说明
> 这是 `v-tabs` 插件的升级版本,参数上有很大变动,支持 `H5` `小程序` `手机端`,如果是在之前的插件上升级的话,请注意参数的变更,触发的事件没有变更。
## 使用说明
### 1、最基本用法
- 视图文件
```html
<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
```
- 脚本文件
```js
export default {
data() {
return {
current: 0,
tabs: ['军事', '国内', '新闻新闻', '军事', '国内', '新闻', '军事', '国内', '新闻']
}
},
methods: {
changeTab(index) {
console.log('当前选中的项:' + index)
}
}
}
```
### 2、平铺整个屏幕
- 视图文件
```html
<v-tabs v-model="activeTab" :scroll="false" :tabs="['全部', '进行中', '已完成']"></v-tabs>
```
- 脚本文件
```js
export default {
data() {
return {
activeTab: 0
}
}
}
```
### 3、胶囊用法
- 视图文件
```html
<v-tabs v-model="current" :tabs="tabs" :pills="true" line-height="0" activeColor="#fff" @change="changeTab"></v-tabs>
```
- 脚本文件
```js
data() {
return {
current: 2,
tabs: [
'军事',
'国内',
'新闻新闻',
'军事',
'国内',
'新闻',
'军事',
'国内',
'新闻',
],
},
methods: {
changeTab(index) {
console.log('当前选中索引:' + index)
}
}
}
```
## 文档说明
### 1、属性说明
| 参数 | 类型 | 默认值 | 说明 |
| :---------------: | :-----: | :-------: | :----------------------------------------: |
| value | Number | 0 | 必传(双向绑定的值) |
| color | String | '#333' | 默认文字颜色 |
| activeColor | String | '#2979ff' | 选中文字的颜色 |
| fontSize | String | '28rpx' | 默认文字大小(rpx 或 px) |
| bold | Boolean | true | 是否加粗选中项 |
| scroll | Boolean | true | 是否显示滚动条,平铺设置 false |
| height | String | '70rpx' | tab 高度(rpx 或 px) |
| lineHeight | String | '10rpx' | 滑块高度(rpx 或 px) |
| lineColor | String | '#2979ff' | 滑块的颜色 |
| lineScale | Number | 0.5 | 滑块宽度缩放值 |
| lineRadius | String | '10rpx' | 滑块圆角宽度(rpx 或 px) |
| pills | Boolean | false | 是否开启胶囊 |
| pillsColor | String | '#2979ff' | 胶囊背景颜色(rpx 或 px) |
| pillsBorderRadius | String | '10rpx' | 胶囊圆角宽度(rpx 或 px) |
| field | String | '' | 如果 tabs 子项是对象,输入需要展示的键名 |
| bgColor | String | '#fff' | 背景色,支持 linear-gradient 渐变 |
| padding | String | '0' | 整个 tab padding 属性 |
| fixed | Boolean | false | 是否固定在顶部 |
| paddingItem | String | '0 22rpx' | 选项的边距(设置上下不生效,需要设置高度) |
### 2、事件说明
| 名称 | 参数 | 说明 |
| :----: | :---: | :--------------------------------: |
| change | index | 改变选中项触发, index 选中项的下标 |
## 更新日志
### 2020-09-21
1. 修复添加 `fixed` 属性后,滚动条无效
2. 修复选项很少的情况下,下划线计算计算错误
3. 新增 `paddingItem` 属性,设置选项左右边距(上下边距需要设置 `height` 属性,或者设置 `padding` 属性)
**写在最后:**
欢迎各位老铁反馈 bug ,本人后端 PHP 一枚,只是应为感兴趣前端,自己琢磨,自己搞。如果你在使用的过程中有什么不合理,需要优化的,都可以在下面评论(或加我 QQ: 1207791534),本人看见后回复、修正,感谢。
### 2020-09-17
1. 紧急修复 bug,横向滑动不了的情况
### 2020-09-16
1. 新增 `fixed` 属性,是否固定在顶部,示例地址:`pages/tabs/tabs-static`
2. 优化之前的页面结构
**注意:**
1. 使用 `padding` 属性的时候,尽量不要左右边距,会导致下划线位置不对
2. 如果不绑定 `v-model` 会导致 `change` 事件改变的时候,下划线不跟随问题
### 2020-09-09
1. 修复 `width` 错误,dom 加载的时候没有及时获取到 `data` 属性导致的。
### 2020-08-29
1. 优化异步改变 `tabs` 后,下划线不初始化问题
2. `github` 地址上有图 2 的源码,需要的自行下载,页面路径:`pages/tabs/order`
### 2020-08-20
1. 优化 `节点查询` 和 `选中渲染`
2. 优化支付宝中 `createSelectorQuery()` 的影响
### 2020-08-19
1. 优化 `change` 事件触发机制
### 2020-08-16
1. 修改默认高度为 `70rpx`
2. 新增属性 `bgColor`,可设置背景颜色,默认 `#fff`
3. 新增整个 `tab` 的 `padding` 属性,默认 `0`
### 2020-08-13
1. 全新的 `v-tabs 2.0`
2. 支持 `H5` `小程序` `APP`
3. 属性高度可配置
## 预览
![v-tabs 2.0.1.gif](https://tva1.sinaimg.cn/large/007S8ZIlgy1ghsv40mj76g30ai0i2tsd.gif)
![v-tabs 2.0.2.gif](https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/42f3a920-a674-11ea-8a24-ffee00625e2e_1.png?v=1597912963)
没有合适的资源?快使用搜索试试~ 我知道了~
外卖CPS优惠券小程序平台v3.0源码+搭建说明.rar
共453个文件
png:234个
json:55个
js:50个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
1星 1 下载量 71 浏览量
2022-06-23
09:38:19
上传
评论 3
收藏 19.92MB RAR 举报
温馨提示
外卖CPS优惠券小程序平台v3.0源码+搭建说明.rar
资源推荐
资源详情
资源评论
收起资源包目录
外卖CPS优惠券小程序平台v3.0源码+搭建说明.rar (453个子文件)
配置订阅信息.docx 473KB
7057e518bd7fbb71c3e182bf208aeeda.gif 5.39MB
7057e518bd7fbb71c3e182bf208aeeda.gif 5.39MB
.gitignore 192B
.gitignore 192B
11.jpg 60KB
11.jpg 60KB
11.jpg 60KB
11.jpg 60KB
11.jpg 60KB
didi.jpg 3KB
didi.jpg 3KB
didi.jpg 3KB
didi.jpg 3KB
didi.jpg 3KB
vendor.js 234KB
vendor.js 85KB
vendor.js 85KB
eatwhat.js 42KB
v-tabs.js 37KB
index.js 36KB
home.js 33KB
drag-ball.js 32KB
add-tip.js 32KB
qqmap-wx-jssdk.min.js 23KB
qqmap-wx-jssdk.min.js 23KB
main.js 17KB
runtime.js 12KB
eatwhat.js 10KB
eatwhat.js 10KB
main.js 5KB
main.js 5KB
runtime.js 4KB
runtime.js 4KB
index.js 3KB
index.js 3KB
v-tabs.js 3KB
v-tabs.js 3KB
icons.js 3KB
icons.js 3KB
index.js 2KB
index.js 2KB
home.js 2KB
home.js 2KB
drag-ball.js 2KB
drag-ball.js 2KB
add-tip.js 2KB
add-tip.js 2KB
main.js 2KB
main.js 2KB
index.js 1KB
index.js 1KB
index.js 778B
index.js 778B
openid.js 567B
openid.js 567B
home.js 259B
home.js 259B
index.js 202B
index.js 202B
index.js 173B
index.js 173B
app.js 89B
app.js 89B
app.js 89B
db_init.json 6KB
db_init.json 6KB
manifest.json 3KB
manifest.json 3KB
pages.json 1KB
pages.json 1KB
project.config.json 1KB
app.json 1KB
app.json 1KB
app.json 1KB
project.config.json 561B
project.config.json 561B
launch.json 468B
package.json 318B
package.json 318B
package.json 272B
package.json 272B
package.json 261B
package.json 261B
package.json 222B
package.json 222B
package.json 219B
package.json 219B
index.json 216B
index.json 216B
index.json 216B
sitemap.json 191B
sitemap.json 191B
sitemap.json 191B
package-lock.json 184B
package-lock.json 184B
package-lock.json 178B
package-lock.json 178B
package-lock.json 173B
package-lock.json 173B
共 453 条
- 1
- 2
- 3
- 4
- 5
资源评论
- Deep-李兵2022-07-28内容不实,退款 #标题与内容不符 #毫无价值
qq_38220914
- 粉丝: 600
- 资源: 4313
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功