更新记录

1.0.1(2020-09-28)

删除无用的css引用

1.0.0(2020-09-19)

初次提交


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 2.6.11 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

Menu-Goods

说明

可以用与uni-app的左侧点击右侧滚动,右侧滑动左侧锚点选中的组件,具体效果见下图。

Github地址

https://github.com/guguji5/menu-goods

安装

npm install menugoods

引入

import MenuGoods from 'menugoods'

使用

<menu-goods 
    :left-width="150"  
    @change="handleChange" 
    :selectedGood="selectedGood" 
    :menus="menus" 
    :goods="goods" 
    :scrollHeight="scrollHeight">
</menu-goods>

属性说明

属性名称 类型 是否必填 说明
menus string[] 必填 左侧菜单,直接渲染成左侧菜单,也接受object[]格式,如果为object,则默认展示name属性
goods object[] 必填 右侧商品,必须有menu属性,其决定着其从属于那个左侧菜单,name属性为默认展示,id用于判断是否选中
scrollHeight number 必填 scroll-view组件必须传入高度才可滚动
leftWidth number 选填 左侧菜单宽度,默认120px
selectedGood object 必填 选中商品,应包含id,name,menu属性
dynamicMenusAndGoods boolean 选填 是否需要监听menus和goods属性重新渲染数据
selectKey string 选填 goods匹配选中项时的属性,默认为id
goodKey string 选填 goods匹配menu菜单时的属性,默认为menu
menuKey string 选填 menus为object[]时此项必填,可设置menus中与goodKey匹配的属性
goodTopMargin number 选填 good的上边距,出现上下外边距合并时可设置此属性来保证滚动位置的精准

事件

事件名称 说明 返回值
change 点击右侧商品时触发 返回选中商品

方法

方法名称 说明 返回值
reset 当menus和goods变化时可手动重置该组件,默认选中第一项

SLOT

name 说明
默认 右侧商品可用slot传入,接受child变量,其为goods子项
<menu-goods :left-width="150"  @change="handleChange" :selectedGood="selectedGood" :menus="menus" :goods="goods" :scrollHeight="scrollHeight">
    <template  v-slot="{ child }">
        <view>{{ child.name }}</view>
        <view class="price">¥{{ child.price }}元</view>
    </template>
</menu-goods>
查看demo ``` { this.scrollHeight = uni.getSystemInfoSync().windowHeight - res.height }).exec() }, } <style lang="scss" scoped> #component-test{ text-align: center; padding: 10px; font-size: x-large; background: white; } .price{ color:chocolate; font-size: 14px; } </style> ```

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问