uni-ui组件库_商品导航-【官方】百战程序员_IT在线教育培训机构

属性名	类型	默认值	说明
text	String	-	显示文字
icon	String		图标，参考
info	Number	0	右上角数字角标
infoBackgroundColor	String	#ff0000	角标背景色
infoColor	String	#fff	角标前景色

buttonGroup 参数说明

属性名	类型	默认值	说明
text	String	-	按钮文字
backgroundColor	String	-	按钮背景色
color	String	-	字体颜色

GoodsNav Events

事件名	说明	返回值
@click	左侧点击事件	e = {index,content}
@buttonClick	右侧按钮组点击事件	e = {index,content}


xxxxxxxxxx
<uni-goods-nav 
               :options="options" 
               :buttonGroup="buttonGroup"  
               @click="onClick" 
               @buttonClick="buttonClick" 
               />


xxxxxxxxxx
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++
        }
    }
}

实时效果反馈

1. uni-ui中，使用商品导航组件，哪个属性可以配置组件按钮：

A options

B text

C info

D buttonGroup

答案

1=>D

uni-ui组件库_日历 uni-ui组件库_导航栏组件

北京市昌平区回龙观镇南店村综合商业楼2楼226室