wxc-swipe-action

!> These rich interaction components are based on BindingX feature. Make sure your app install it.

Rule

• Only one row can be swiped at a time
• Hide operations by clicking on the right button or by clicking on the list.

[Demo]

Code Example

<template>
<div>
    <WxcSwipeAction @onNodeClick='onTest' :data='data'>
      <text class="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>

API

Data API

Button

Event

// click
`@onNodeClick='onTest'`