@wines/swipe-action v1.5.1

@wines/swipe-action

SwipeAction 滑动操作

用于滑动操作组件。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "SwipeAction",
  "usingComponents": {
    "wux-cell": "@wines/cell",
    "wux-cell-group": "@wines/cell-group",
    "wux-icon": "@wines/icon",
    "wux-swipe-action": "@wines/swipe-action",
    "wux-swipe-action-group": "@wines/swipe-action/group"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">SwipeAction</view>
		<view class="page__desc">滑动操作</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">With swipeActionGroup</view>
		<wux-swipe-action-group>
			<wux-swipe-action
			 autoClose
			 left="{{ left }}"
			 right="{{ right }}"
			 bind:click="onClick"
			>
				<view class="demo-item">Have left and right buttons</view>
			</wux-swipe-action>
			<wux-swipe-action autoClose left="{{ left }}">
				<view class="demo-item">Only left buttons</view>
			</wux-swipe-action>
			<wux-swipe-action autoClose right="{{ right }}">
				<view class="demo-item">Only right buttons</view>
			</wux-swipe-action>
			<wux-swipe-action autoClose useSlots>
				<view slot="left">
					<view class="demo-button">
						<wux-icon type="ios-heart" />
					</view>
				</view>
				<view slot="right">
					<view class="demo-button" bindtap="onShare">
						<wux-icon type="ios-share-alt" />
					</view>
				</view>
				<view class="demo-item">UseSlots</view>
			</wux-swipe-action>
		</wux-swipe-action-group>
		<view class="sub-title">With cellGroup</view>
		<wux-cell-group>
			<wux-swipe-action
			 autoClose
			 left="{{ left }}"
			 right="{{ right }}"
			 bind:click="onClick"
			>
				<wux-cell title="Have left and right buttons" bind:click="onCellClick" />
			</wux-swipe-action>
			<wux-swipe-action autoClose left="{{ left }}">
				<wux-cell title="Only left buttons" bind:click="onCellClick" />
			</wux-swipe-action>
			<wux-swipe-action autoClose right="{{ right }}">
				<wux-cell title="Only right buttons" bind:click="onCellClick" />
			</wux-swipe-action>
		</wux-cell-group>
		<view class="sub-title">Using data</view>
		<wux-cell-group>
			<wux-swipe-action
			 autoClose
			 right="{{ right }}"
			 data="2019"
			 bind:click="onClick"
			>
				<wux-cell title="Only right buttons" />
			</wux-swipe-action>
		</wux-cell-group>
	</view>
</view>

import './index.less';

Page({
  data: {
    right: [
      {
        text: 'Cancel',
        style: 'background-color: #ddd; color: white',
      },
      {
        text: 'Delete',
        style: 'background-color: #F4333C; color: white',
      },
    ],
    left: [
      {
        text: 'Reply',
        style: 'background-color: #108ee9; color: white',
      },
      {
        text: 'Cancel',
        style: 'background-color: #ddd; color: white',
      },
    ],
  },
  onClick(e) {
    console.log('onClick', e.detail);
    if (e.detail.data) {
      void wx.showModal({
        title: `The data is ${e.detail.data as string}`,
        showCancel: !1,
      });
    }
  },
  onShare() {
    console.log('onShare');
  },
  onCellClick() {
    console.log('onCellClick');
  },
});

API

SwipeAction props

SwipeAction slot

SwipeAction externalClasses