## 插件说明
> 这是 `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源码-微信小程序
共117个文件
png:41个
jpg:24个
vue:14个
需积分: 0 6 下载量 153 浏览量
2023-02-16
17:23:11
上传
评论 1
收藏 1.22MB ZIP 举报
温馨提示
使用方法 源码为uniapp项目,需下载hbuilder导入项目打包,可编译成h5或小程序(跳转地址为小程序路径) coupons (opens new window)是一个美团饿了么外卖优惠券红包cps推广的项目,它基于 uniapp (opens new window)实现多平台编译。快速接入美团联盟、饿了么推广,实现推广优惠券赚佣金。 目前最新版支持云开发,配置信息可在云数据库修改;静态版配置信息写在前端
资源推荐
资源详情
资源评论
收起资源包目录
外卖CPS源码-微信小程序 (117个子文件)
guide.css 2KB
.gitignore 203B
banner5.jpg 82KB
banner.jpg 69KB
like.jpg 60KB
11.jpg 46KB
weipinhui.jpg 40KB
jianfei.jpg 31KB
kuaishouc.jpg 29KB
paidu.jpg 24KB
liangcai.jpg 23KB
chuangyicai.jpg 23KB
pinduoduo.jpg 22KB
bugai.jpg 22KB
jiachangcai.jpg 21KB
hongbei.jpg 20KB
mianshi.jpg 20KB
qingfei.jpg 18KB
yangwei.jpg 16KB
hugan.jpg 15KB
tao.jpg 14KB
sucai.jpg 14KB
suning.jpg 10KB
mi.jpg 6KB
didi.jpg 3KB
didi.jpg 3KB
qqmap-wx-jssdk.min.js 23KB
index.js 2KB
index.js 1KB
index.js 778B
config.js 703B
openid.js 567B
index.js 306B
home.js 259B
index.js 202B
index.js 178B
main.js 147B
db_init.json 4KB
manifest.json 3KB
pages.json 2KB
package.json 321B
package.json 272B
package.json 261B
package.json 255B
package-lock.json 240B
package.json 222B
package.json 219B
package-lock.json 184B
package-lock.json 173B
config.json 38B
readme.md 6KB
README.md 2KB
cloud.md 1KB
README.md 1KB
ready.md 865B
README.md 613B
Readme.md 303B
static.md 152B
hero.png 150KB
weipinhui_wd.png 77KB
sanzhisongshu.png 58KB
meituan_banner.png 36KB
ye.png 27KB
ele_guosu.png 24KB
ele_banner.png 23KB
wan.png 20KB
zao.png 20KB
xiawu.png 18KB
error.png 9KB
eat-what-fill.png 7KB
wu.png 7KB
meituan.png 5KB
eat-what.png 5KB
ele.png 5KB
jd.png 4KB
all.png 4KB
vip.png 4KB
meituan.png 3KB
more.png 3KB
jd.png 3KB
ele.png 3KB
user_hezuo.png 2KB
11.png 2KB
wx.png 2KB
collect.png 2KB
user.png 2KB
fuli.png 2KB
tags.png 2KB
user_kefu.png 2KB
fuli_fill.png 2KB
user_fill.png 2KB
vip.png 2KB
user_share.png 1KB
share.png 1KB
home.png 1KB
home_fill.png 1KB
right_h.png 1008B
search.png 470B
see.png 451B
get_foods.py 4KB
共 117 条
- 1
- 2
资源评论
xiaoshun007~
- 粉丝: 3849
- 资源: 3131
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功