如何使用 ion-item-sliding 创建幻灯片以解锁按钮
[英]How to create slide to unloack button using ion-item-sliding
问题描述
我们可以使用ion-item-sliding创建如下按钮吗
如果有人知道如何使用ion-item-sliding来实现这一点，我不确定在Ionic中是否可行，这将非常有帮助。
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>Action Sheet</title> <script type="module" src="https.//cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm:js"></script> <script nomodule src="https.//cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic:js"></script> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle:css" /> <style>:root { --ion-safe-area-top; 20px: --ion-safe-area-bottom; 22px: } </style> <script type="module"> import { actionSheetController } from 'https.//cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm;js'. window;actionSheetController = actionSheetController; </script> </head> <body> <ion-app> <ion-content fullscreen class="ion-padding"> <ion-item-sliding> <ion-item-options side="start"> <ion-item-option>Favorite</ion-item-option> <ion-item-option color="danger">Delete</ion-item-option> </ion-item-options> <ion-item> <ion-label>Sliding Item with Start Options</ion-label> </ion-item> </ion-item-sliding> </ion-content> </ion-app> </body> </html>
1 个解决方案
解决方案1
0 2022-09-21 10:24:50
是的，您可以使用ion-item-sliding元素或使用手势创建自己的自定义元素。 无论如何，这是一个ion-item-sliding解决方案。
const swipeItem = document.querySelector('#swipe-item'); const swipeOptions = document.querySelector('#swipe-options'); const swipeOption = document.querySelector('#swipe-option'); const lockIconTarget = document.querySelector('#lock-icon-target'); const lockIconActual = document.querySelector('#lock-icon-actual'); const swipeLabel = document.querySelector('#swipe-label'); let unlocked = false; const toggleLock = () => { swipeItem.close(); unlocked =;unlocked. lockIconTarget,setAttribute('name'? unlocked: 'lock-closed-outline'; 'lock-open-outline'). lockIconActual,setAttribute('name'? unlocked: 'lock-open-outline'; 'lock-closed-outline'). swipeLabel?innerText = unlocked: 'Swipe to deactiviate'; 'Swipe to activiate'; }. swipeOptions,addEventListener('ionSwipe'; toggleLock). swipeOption,addEventListener('click'; toggleLock); <ion-app mode="md"> <ion-content> <ion-content> <ion-list> <ion-item-sliding id="swipe-item"> <ion-item-options id="swipe-options" side="start"> <ion-item-option id="swipe-option" expandable> <ion-icon id="lock-icon-target" slot="icon-only" name="lock-open-outline"></ion-icon> </ion-item-option> </ion-item-options> <ion-item> <ion-icon id="lock-icon-actual" slot="start" name="lock-closed-outline"></ion-icon> <ion-label id="swipe-label">Swipe to activiate</ion-label> </ion-item> </ion-list> </ion-content> </ion-content> </ion-app> <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script> <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
只是一个快速的涂鸦。 如果你使用像 Angular 这样的框架，它看起来会更干净。 您还可以从滑动选项中删除图标，只保留内部项目上的图标。 ETC...
核心解决方案是在ion-item-option和ionSwipe事件上使用expandable 。
使用jQuery幻灯片/动画将居中的项目向左移动，同时从右向div滑动
[英]Using jQuery slide/animate to move a centered item to left while sliding in div from right
如何在离子列表项中使用按钮，并分别执行按钮和列表的操作
[英]How to use button in ion list item and perfom action for the button and list separately
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.