wxc-swipe-action
优质
小牛编辑
193浏览
2023-12-01
!> 这个富交互体验组件依赖于 BindingX 特性,使用前请确定你的App 是否安装
规则
- 一次只可滑动一行列表
- 点击右边按钮或点击列表可隐藏操作。
[Demo]
使用方法
<template>
<div>
<WxcSwipeAction @onNodeClick='onTest' :data='data'>
<text slot-scope="val">{{val.val.item.title}}{{val.val.index}}</text>
</WxcSwipeAction>
</div>
</template>
<script>
import { WxcSwipeAction } from 'weex-ui';
const modal = weex.requireModule("modal");
export default {
components: {
WxcSwipeAction
},
data() {
return {
data: [
{
title: "标题1",
right: [
{
text: "置顶",
onPress: function() {
modal.toast({
message: "置顶",
duration: 0.3
});
}
},
{
text: "删除",
onPress: () => {
modal.toast({
message: "删除",
duration: 0.3
});
},
style: { backgroundColor: "#F4333C", color: "white" }
}
]
},
{
title: "标题2",
right: [
{
text: "删除",
onPress: () => {
modal.toast({
message: "删除",
duration: 0.3
});
},
style: { backgroundColor: "#F4333C", color: "white" }
}
]
},
{
title: "标题3",
right: [
{
text: "删除",
onPress: () => {
modal.toast({
message: "删除",
duration: 0.3
});
},
style: { backgroundColor: "#F4333C", color: "white" }
}
]
}
]
};
},
methods: {
onTest(node, i) {
modal.toast({
message: node.title,
duration: 0.3
});
}
}
};
</script>
可配置参数
参数 | 类型 | 是否要引入 | 默认值 | 描述 |
---|---|---|---|---|
data | Array | Y | [] | 列表数据 |
height | Number | Y | [] | 列表高度 |
styles | Object | Y | [] | div样式 |
Data API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | String | null |
right | 右侧按钮组 | Array | null |
autoClose | 点击按钮后自动隐藏按钮 | Boolean | false |
Button
参数 | 类型 | 描述 |
---|---|---|
text | String | 文案 |
style | Object | 按钮样式 |
onPress | ():void | 单击事件 |
事件回调
// 单击列表
`@onNodeClick='onTest'`