tui-swipe-action 滑动菜单 开源组件

介绍

swipeAction滑动菜单：actions长度为0时，插槽可直接自定义操作菜单按钮。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiSwipeAction from "@/components/thorui/tui-swipe-action/tui-swipe-action.vue"
export default {
	components:{
		tuiSwipeAction
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-swipe-action": "/components/thorui/tui-swipe-action/tui-swipe-action"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 actions 属性设置操作按钮。

<!--uni-app-->
<tui-swipe-action :actions="actions"  @click="handlerButton">
  <template v-slot:content>
  	<view class="tui-list-item">基本使用</view>
  </template>
</tui-swipe-action>

// data 数据 及 方法
export default {
  data() {
  	return {
  		actions: [{
  			name: '删除',
  			color: '#fff',
  			fontsize: 30, //单位rpx
  			width: 70, //单位px
  			background: '#FD3B31'
  		},
  		{
  			name: '修改',
  			color: '#fff',
  			fontsize: 30,
  			width: 70,
  			background: '#5677fc'
  		},
  		{
  			name: '收藏',
  			width: 70,
  			fontsize: 30,
  			color: '#fff',
  			background: '#C8C7CD'
  		}]
  	}
  },
  methods: {
  	handlerButton(e) {
  		let index = e.index;
  		let item = e.item;
  		let menuTxt = ['删除', '修改', '收藏'][index];
  		console.log('您点击了【' + menuTxt + '】按钮')
  	}
  }
}

.tui-list-item {
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

<!--微信小程序-->
<tui-swipe-action actions="{{actions}}"  bindclick="handlerButton">
  <view slot="content" class="tui-list-item">基本使用</view>
</tui-swipe-action>

// data 数据 及 方法
Page({
  data: {
    actions: [{
    	name: '删除',
    	color: '#fff',
    	fontsize: 30, //单位rpx
    	width: 70, //单位px
    	background: '#FD3B31'
    },
    {
    	name: '修改',
    	color: '#fff',
    	fontsize: 30,
    	width: 70,
    	background: '#5677fc'
    },
    {
    	name: '收藏',
    	width: 70,
    	fontsize: 30,
    	color: '#fff',
    	background: '#C8C7CD'
    }]
  },
  handlerButton(e) {
  	let index = e.detail.index;
  	let item = e.detail.item;
  	let menuTxt = ['删除', '修改', '收藏'][index];
  	console.log('您点击了【' + menuTxt + '】按钮')
  }
})

.tui-list-item {
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

// Make sure to add code blocks to your code group

禁止滑动

通过 forbid 属性设置是否禁止滑动出现操作菜单，默认为false。

<!--uni-app-->
<tui-swipe-action :actions="actions" forbid>
  <template v-slot:content>
  	<view class="tui-list-item">基本使用</view>
  </template>
</tui-swipe-action>

// data 数据 及 方法
export default {
  data() {
  	return {
  		actions: [{
  			name: '删除',
  			color: '#fff',
  			fontsize: 30, //单位rpx
  			width: 70, //单位px
  			background: '#FD3B31'
  		},
  		{
  			name: '修改',
  			color: '#fff',
  			fontsize: 30,
  			width: 70,
  			background: '#5677fc'
  		},
  		{
  			name: '收藏',
  			width: 70,
  			fontsize: 30,
  			color: '#fff',
  			background: '#C8C7CD'
  		}]
  	}
  },
  methods: {
  	
  }
}

.tui-list-item {
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

<!--微信小程序-->
<tui-swipe-action actions="{{actions}}" forbid>
  <view slot="content" class="tui-list-item">基本使用</view>
</tui-swipe-action>

// data 数据 及 方法
Page({
  data: {
    actions: [{
    	name: '删除',
    	color: '#fff',
    	fontsize: 30, //单位rpx
    	width: 70, //单位px
    	background: '#FD3B31'
    },
    {
    	name: '修改',
    	color: '#fff',
    	fontsize: 30,
    	width: 70,
    	background: '#5677fc'
    },
    {
    	name: '收藏',
    	width: 70,
    	fontsize: 30,
    	color: '#fff',
    	background: '#C8C7CD'
    }]
  }
})

.tui-list-item {
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

// Make sure to add code blocks to your code group

使用变量控制开关

通过 open 属性控制滑动菜单打开关闭，默认为 false，设为 true 时菜单会自动打开展示。

<!--uni-app-->
<tui-swipe-action :actions="actions" :open="open">
  <template v-slot:content>
  	<view class="tui-list-item">基本使用</view>
  </template>
</tui-swipe-action>

// data 数据 及 方法
export default {
  data() {
  	return {
  		open:false,
  		actions: [{
  			name: '删除',
  			color: '#fff',
  			fontsize: 30, //单位rpx
  			width: 70, //单位px
  			background: '#FD3B31'
  		}]
  	}
  },
  onLoad() {
  	setTimeout(()=>{
  		this.open = true;
  	},1000)
  }
}

  .tui-list-item {
  	padding: 40rpx 30rpx;
  	display: flex;
  	align-items: center;
  	box-sizing: border-box;
  }

<!--微信小程序-->
<tui-swipe-action actions="{{actions}}" open="{{open}}">
  <view slot="content" class="tui-list-item">基本使用</view>
</tui-swipe-action>

// data 数据 及 方法
Page({
  data: {
    open:false,
    actions: [{
  	name: '删除',
  	color: '#fff',
  	fontsize: 30, //单位rpx
  	width: 70, //单位px
  	background: '#FD3B31'
    }]
  },
  onLoad() {
  	setTimeout(()=>{
  		this.setData({
  		   open:true
  		})
  	},1000)
  }
})

.tui-list-item {
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

// Make sure to add code blocks to your code group

自定义操作菜单

自定义操作菜单时，不设置 actions 属性值即可。在插槽 button 中自定义操作菜单。

<!--uni-app-->
<tui-swipe-action :operateWidth="140">
  <template v-slot:content>
  	<view class="tui-list-item">自定义操作菜单，不传actions</view>
  </template>
  <template v-slot:button>
  	<view class="tui-custom-btn_box">
  		<view class="tui-custom-btn tui-custom-mr" @tap="customBtn(0)"><tui-icon name="star" color="#333" :size="20"></tui-icon></view>
  		<view class="tui-custom-btn" @tap="customBtn(1)"><tui-icon name="delete" color="#333" :size="18"></tui-icon></view>
  	</view>
  </template>
</tui-swipe-action>

// data 数据 及 方法
export default {
  data() {
  	return {
  		
  	}
  },
  methods: {
  	customBtn(index) {
  		index = index + 1;
  		console.log('您点击了按钮' + index)
  	}
  }
}

.tui-list-item {
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.tui-custom-btn_box {
	width: 140px;
	height: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fafafa;
}

.tui-custom-btn {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: #fff;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tui-custom-mr {
	margin-right: 20rpx;
}

<!--微信小程序-->
<tui-swipe-action operateWidth="{{140}}">
  <view class="tui-list-item tui-last" slot="content">自定义操作菜单，不传actions</view>
  <view class="tui-custom-btn_box" slot="button">
    <view class="tui-custom-btn tui-custom-mr" bindtap="customBtn" data-index="0">
      <tui-icon name="star" color="#333" size="{{20}}"></tui-icon>
    </view>
    <view class="tui-custom-btn" bindtap="customBtn" data-index="1">
      <tui-icon name="delete" color="#333" size="{{18}}"></tui-icon>
    </view>
  </view>
</tui-swipe-action>

// data 数据 及 方法
Page({
  data: {
   
  },
  customBtn(e) {
  	let index = Number(e.currentTarget.dataset.index);
  	index = index + 1;
  	console.log('您点击了按钮' + index)
  }
})

.tui-list-item {
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.tui-custom-btn_box {
	width: 140px;
	height: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fafafa;
}

.tui-custom-btn {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: #fff;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tui-custom-mr {
	margin-right: 20rpx;
}

// Make sure to add code blocks to your code group

Slots

插槽名称	说明
content	滑动内容块，自定义内容展示
button	自定义操作菜单时使用，操作菜单内容

Props

属性名	类型	描述	默认值
actions	Array	操作菜单按钮	[ ]
nameField V3.0.0+	String	操作菜单按钮文本key	name
color V3.0.0+	String	操作菜单按钮文本颜色，优先级低于actions中color	#fff
iconField V3.0.0+	String	操作菜单按钮图标key	icon
width V3.0.0+	String	操作菜单按钮宽度，单位px，优先级低于actions中width	70
closable	Boolean	点击按钮时是否自动关闭	true
showMask	Boolean	设为false，可以滑动多行不关闭菜单	true
operateWidth	Number	按钮宽度 单位px	80
params	Object	自定义参数，点击按钮回传	{ }
forbid	Boolean	禁止滑动	false
open	Boolean	手动开关	false
backgroundColor	String	滑动块内容背景色	#fff

actions 属性Object对象参数说明

通过 open 属性控制滑动菜单打开关闭，默认为 false，设为 true 时菜单会自动打开展示。

 [{
	 name: '删除', //操作名称，可用nameField属性指定key
	 color: '#fff', //字体颜色
	 fontsize: 32, //字体大小，单位rpx
	 width: 70, // 宽度，单位px
	 icon: 'like.png', // 图标地址，可用iconField属性指定key，可选
	 imgWidth: 48, // 图标宽度，单位rpx，可选
	 imgHeight:48, // 图标高度，单位rpx，可选
	 background: '#ed3f14' //菜单按钮背景色
 }]

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	操作菜单按钮点击事件	{   index: Number, // 按钮索引   item: params //参数值 }

预览

请以移动端效果为准，touch事件目前尚未完全在PC端做兼容。

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码