支付寶小程序手勢組件 可滑動單元格·SwipeAction

可滑動單元格。

掃碼體驗

示例代碼

{
 "defaultTitle": "Swipe-action",
 "usingComponents": {
   "list": "mini-ali-ui/es/list/index",
   "list-item": "mini-ali-ui/es/list/list-item/index",
   "swipe-action": "mini-ali-ui/es/swipe-action/index"
 }
}

<view>
    <list>
 <view a:for="{{list}}" key="{{item.content}}">
    <swipe-action
   index="{{index}}"
   restore="{{swipeIndex === null || swipeIndex !== index}}"
   right="{{item.right}}"
   onRightItemClick="onRightItemClick"
   onSwipeStart="onSwipeStart"
   extra="item{{index}}"
   borderRadius="{{index <= 2 ? true : false}}"
    >
   <list-item
    arrow="horizontal"
    index="{{index}}"
    key="items-{{index}}"
    onClick="onItemClick"
    last="{{index === list.length - 1}}"
    upperSubtitle="{{index >= 4?'這是一個有副標題的列表':''}}"
    lowerSubtitle="{{index === 5?'這是一個小的副標題':''}}"
    borderRadius="{{index <= 2 ? true : false}}"
   >
    {{item.content}}
   </list-item>
    </swipe-action>
 </view>
    </list>
</view>

Page({
 data: {
   swipeIndex: null,
   list: [
     { right: [{ type: 'delete', text: '刪除', fColor: 'black' }], content: '更換文字顏色' },
     { right: [{ type: 'edit', text: '取消收藏', fColor: 'rgba(0,0,0,.5)' }, { type: 'delete', text: '刪除', fColor: 'yellow' }, { type: 'other', text: '新增一個' }], content: '改變文字顏色' },
     { right: [{ type: 'edit', text: '取消收藏', bgColor: '#333' }, { type: 'delete', text: '刪除' }], content: '其中一個背景色變化' },
     { right: [{ type: 'edit', text: '取消收藏', bgColor: '#ccc', fColor: '#f00' }, { type: 'delete', text: '刪除', bgColor: '#0ff', fColor: '#333' }], content: '文字和背景色同時改變' },
     { right: [{ type: 'edit', text: '取消收藏取消收藏取消' }, { type: 'delete', text: '刪除刪除刪除刪除' }], content: '默認顏色樣式' },
     { right: [{ type: 'edit', text: '取消關(guān)注' }, { type: 'other', text: '免打擾' }, { type: 'delete', text: '刪除' }], content: '三個選項的卡片' },
     { right: [{ type: 'edit', text: '取消關(guān)注' }, { type: 'other', text: '免打擾' }, { type: 'delete', text: '刪除' }], content: '三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片三個選項的卡片' },
   ],
 },
 onRightItemClick(e) {
   const { type } = e.detail;
   my.confirm({
     title: '溫馨提示',
     content: `${e.index}-${e.extra}-${JSON.stringify(e.detail)}`,
     confirmButtonText: '確定',
     cancelButtonText: '取消',
     success: (result) => {
       const { list } = this.data;
       if (result.confirm) {
         if (type === 'delete') {
           list.splice(this.data.swipeIndex, 1);
         }
         my.showToast({
           content: '確定 => 執(zhí)行滑動刪除還原',
         });
         e.done();
       } else {
         my.showToast({
           content: '取消 => 滑動刪除狀態(tài)保持不變',
         });
       }
     },
   });
 },
 onItemClick(e) {
   my.alert({
     content: `dada${e.index}`,
   });
 },
 onSwipeStart(e) {
   this.setData({
     swipeIndex: e.index,
   });
 },
});

屬性

Bug & Tip

• 當有多個 SwipeAction 組件時，當滑動其中一個時，需要將其他的組件的 restore 屬性設置為 true，避免一個頁面同時存在多個 swipeAction 處于活動狀態(tài)；
• right 數(shù)組中的格式：[{ type: '', text: '', fColor: '', bgColor: '',},]；
• right 中的 type 共有三個值：edit、delete 和 other；
• fColor 為文本顏色，bgColor 為背景色顏色，三種 type 均可自定義顏色，如未設置，默認值為：
  • edit：#ccc；
  • delete：#FF3B30；
  • other：#1677FF；
• SwipeAction 是與 list 組件組合使用的；
• borderRadius 是為了結(jié)合帶圓角的 list-item 而存在的，如果為 true 時，將會把右側(cè) item 顯示為圓角模式；
• swipeWidth 可設置 swipe-action 組件的整體寬度，默認為 my.getSystemInfoSync() 所得的 windowWidth，傳入的寬度值不接受百分比單位，建議使用 px 或者 rpx；
• 如列表數(shù)據(jù)過多有卡頓情況，建議將 enableNew 設置為 false；