目錄

#平臺(tái)差異說明

#基本使用

#修改按鈕樣式

#點(diǎn)擊事件

#API

#Props

#Event

---

該組件一般用于左滑喚出操作菜單的場景，用的最多的是左滑刪除操作。

注意

如果把該組件通過v-for用于左滑刪除的列表，請保證循環(huán)的:key是一個(gè)唯一值，可以用數(shù)據(jù)的id或者title替代。 不能是數(shù)組循環(huán)的index，否則刪除的時(shí)候，可能會(huì)出現(xiàn)數(shù)據(jù)錯(cuò)亂

#平臺(tái)差異說明

App	H5	微信小程序	支付寶小程序	百度小程序	頭條小程序	QQ小程序
√	√	√	√	√	√	√

#基本使用

• 通過slot傳入內(nèi)部內(nèi)容即可，可以將v-for的"index"索引值傳遞給index參數(shù)，用于點(diǎn)擊時(shí)，在回調(diào)方法中對某一個(gè)數(shù)據(jù)進(jìn)行操作(點(diǎn)擊回調(diào)時(shí)第一個(gè)參數(shù)會(huì)返回此索引值)
• 內(nèi)部的按鈕通過options參數(shù)配置，此參數(shù)為一個(gè)數(shù)組，元素為對象，可以配置按鈕的文字，背景顏色(建議只配置此兩個(gè)參數(shù)即可)，請勿配置寬高等屬性。

說明：有時(shí)候，我們在打開一個(gè)swipeAction的同時(shí)，需要自動(dòng)關(guān)閉其他的swipeAction，這時(shí)需要通過open事件實(shí)現(xiàn)，見如下：

<template><view><u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id" @click="click" @open="open":options="options"><view class="item u-border-bottom"><image mode="aspectFill" :src="item.images" /><!-- 此層wrap在此為必寫的，否則可能會(huì)出現(xiàn)標(biāo)題定位錯(cuò)誤 --><view class="title-wrap"><text class="title u-line-2">{{ item.title }}</text></view></view></u-swipe-action></view>
</template><script>export default {data() {return {list: [{id: 1,title: '長安回望繡成堆，山頂千門次第開，一騎紅塵妃子笑，無人知是荔枝來',images: 'https://cdn.uviewui.com/uview/common/logo.png',show: false},{id: 2,title: '新豐綠樹起黃埃，數(shù)騎漁陽探使回，霓裳一曲千峰上，舞破中原始下來',images: 'https://cdn.uviewui.com/uview/common/logo.png',show: false},{id: 3,title: '登臨送目，正故國晚秋，天氣初肅。千里澄江似練，翠峰如簇',images: 'https://cdn.uviewui.com/uview/common/logo.png',show: false,}],disabled: false,btnWidth: 180,show: false,options: [{text: '收藏',style: {backgroundColor: '#007aff'}},{text: '刪除',style: {backgroundColor: '#dd524d'}}]};},methods: {click(index, index1) {if(index1 == 1) {this.list.splice(index, 1);this.$u.toast(`刪除了第${index}個(gè)cell`);} else {this.list[index].show = false;this.$u.toast(`收藏成功`);}},// 如果打開一個(gè)的時(shí)候，不需要關(guān)閉其他，則無需實(shí)現(xiàn)本方法open(index) {// 先將正在被操作的swipeAction標(biāo)記為打開狀態(tài)，否則由于props的特性限制，// 原本為'false'，再次設(shè)置為'false'會(huì)無效this.list[index].show = true;this.list.map((val, idx) => {if(index != idx) this.list[idx].show = false;})}}};
</script><style lang="scss" scoped>.item {display: flex;padding: 20rpx;}image {width: 120rpx;flex: 0 0 120rpx;height: 120rpx;margin-right: 20rpx;border-radius: 12rpx;}.title {text-align: left;font-size: 28rpx;color: $u-content-color;margin-top: 20rpx;}
</style>

#修改按鈕樣式

• 通過options參數(shù)配置按鈕的數(shù)量和樣式，見上方說明
• 通過btn-width設(shè)置按鈕的寬度，單位rpx

<u-swipe-action btn-width="180" :options="options">...
</u-swipe-action>

#點(diǎn)擊事件

click點(diǎn)擊事件回調(diào)中，有兩個(gè)參數(shù)，第一個(gè)參數(shù)為通過Props傳入的index參數(shù)，第二個(gè)參數(shù)為滑動(dòng)按鈕的索引，即options數(shù)組的索引， 用于標(biāo)識第幾個(gè)按鈕被點(diǎn)擊。

#API

#Props

參數(shù)	說明	類型	默認(rèn)值	可選值
bg-color	整個(gè)組件背景顏色	String	#ffffff	-
index	標(biāo)識符，點(diǎn)擊時(shí)候用于區(qū)分點(diǎn)擊了哪一個(gè)，用v-for循環(huán)時(shí)的index即可	String | Number	-	-
btn-width	按鈕寬度，單位rpx	String | Number	180	-
disabled	是否禁止某個(gè)swipeAction滑動(dòng)	Boolean	false	true
vibrate-short	是否使手機(jī)發(fā)生短促震動(dòng)，目前只在iOS的微信小程序和微信小程序開發(fā)工具有效	Boolean	false	true
show	打開或者關(guān)閉某個(gè)組件	Boolean	false	true
options	按鈕組的配置參數(shù)，數(shù)組形式，見上方說明	Array	[ ]	-

#Event

事件名	說明	回調(diào)參數(shù)
click	點(diǎn)擊組件時(shí)觸發(fā)	(index1, index)，見上方"點(diǎn)擊事件"的說明
close	組件觸發(fā)關(guān)閉狀態(tài)時(shí)	index: 通過props傳遞的index
open	組件觸發(fā)打開狀態(tài)時(shí)	index: 通過props傳遞的index
content-click	點(diǎn)擊內(nèi)容時(shí)觸發(fā)	index: 通過props傳遞的index