滑动列表控件
小程序自定义组件
使用此组件需要依赖小程序基础库 2.2.1 以上版本,同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。
1. 使用方法
-
在WXML文件中添加控件
使用vscode插件的方式添加代码,定位到要添加该控件的代码处,按快捷键
alt+t w
添加控件代码片段 -
注意
-
每一个 mm-000001 提供两个
<slot>
节点,用于承载组件引用时提供的子节点。 -
left 节点用于承载静止时 mm-000001 所展示的节点,此节点的宽高应与传入 mm-000001 的宽高相同。
-
right 节点用于承载滑动时所展示的节点,其宽度应于传入 mm-000001 的 slideWidth 相同。
<mm-000001 class="slide" width="320" height="100" slideWidth="200"> <view slot="left">这里是插入到组内容</view> <view slot="right"> <view>标为已读</view> <view>删除</view> </view> </mm-000001>
-
2. 属性
属性名 | 类型 | 默认值 | 是否必须 | 说明 |
---|---|---|---|---|
width | Number | 显示屏幕的宽度 | 是 | mm-000001组件的宽度 |
height | Number | 0 | 是 | mm-000001组件的高度 |
slide-width | Number | 0 | 是 | 滑动展示区域的宽度(默认高度与控件相同) |
wid | String | 无 | 是 | 控件标示 |
3. 方法
open()
3.1. 展开菜单
使用示例:
wxml
<mm-000001 width="750" height="110" slide-width="500" class='class-name' wid='widget-001'>
<view slot="left" class="l">
内容
</view>
<view slot="right" class="r" style="background:#ccc;width:250rpx;">
<view>菜单</view>
</view>
</mm-000001>
close()
3.2. 关闭菜单
4. 事件
mmwe-open
4.1. 菜单展开事件
可以通过 e.detail.wid获取控件的唯一标示
mmwe-close
4.2. 菜单折叠事件
可以通过 e.detail.wid获取控件的唯一标示