290144e9
 易尊强
第一次
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
### GoodsNav 商品导航
*已经支持在nvue页面中使用*
商品加入购物车，立即购买，组件名：`uni-goods-nav`，代码块： uGoodsNav。
### 使用方式
引用组件
```javascript
import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
export default {
components: {uniGoodsNav}
}
```
使用组件
```html
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
```
```javascript
export default {
data () {
return {
options: [{
icon: 'headphones',
text: '客服'
}, {
icon: 'shop',
text: '店铺',
info: 2,
infoBackgroundColor:'#007aff',
infoColor:"red"
}, {
icon: 'cart',
text: '购物车',
info: 2
}],
buttonGroup: [{
text: '加入购物车',
backgroundColor: '#ff0000',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: '#ffa200',
color: '#fff'
}
]
}
},
methods: {
onClick (e) {
uni.showToast({
title: `点击${e.content.text}`,
icon: 'none'
})
},
buttonClick (e) {
console.log(e)
this.options[2].info++
}
}
}
```
### 属性说明
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|options |Array |- |组件参数 |
|buttonGroup|Array |- |组件按钮组参数 |
|fill |Boolean|false |按钮是否平铺 |
**options 参数说明：**
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |显示文字 |
|icon |String | |图标，[参考](https://ext.dcloud.net.cn/plugin?id=28) |
|info |Number |0 |右上角数字角标 |
|infoBackgroundColor|String |#ff0000|角标背景色 |
|infoColor |String |#fff |角标前景色 |
**buttonGroup 参数说明：**
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|text |String |- |按钮文字 |
|backgroundColor |String |- |按钮背景色 |
|color |String |- |字体颜色 |
### 事件说明
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|@click |左侧点击事件 |e = {index,content}|
|@buttonClick |右侧按钮组点击事件 |e = {index,content}|
### 插件预览地址
[https://uniapp.dcloud.io/h5/pages/extUI/goods-nav/goods-nav](https://uniapp.dcloud.io/h5/pages/extUI/goods-nav/goods-nav)
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav](https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav)
|
