You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
2 years ago | |
|---|---|---|
| .. | ||
| components/uni-goods-nav | 2 years ago | |
| changelog.md | 5 years ago | |
| package.json | 5 years ago | |
| readme.md | 5 years ago | |
readme.md
GoodsNav 商品导航
已经支持在nvue页面中使用
商品加入购物车,立即购买,组件名:uni-goods-nav,代码块: uGoodsNav。
使用方式
引用组件
import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
export default {
components: {uniGoodsNav}
}
使用组件
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
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 | 图标,参考 | |
| info | Number | 0 | 右上角数字角标 |
| infoBackgroundColor | String | #ff0000 | 角标背景色 |
| infoColor | String | #fff | 角标前景色 |
buttonGroup 参数说明:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| text | String | - | 按钮文字 |
| backgroundColor | String | - | 按钮背景色 |
| color | String | - | 字体颜色 |
事件说明
| 事件名 | 说明 | 返回值 |
|---|---|---|
| @click | 左侧点击事件 | e = {index,content} |
| @buttonClick | 右侧按钮组点击事件 | e = {index,content} |