Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
itlpps

IONIC - Sliding item list

Pergunta

E ai galera, 

Estou fazendo um trabalho em ionic, mas não manjo muito disso.

 

Preciso fazer um sliding item, pra excluir um registro da lista.

Todos os exemplos que achei são feitos com um botão de excluir. (tipo esse https://ionicframework.com/docs/components/#sliding-list)

 

Queria que ao deslizar já excluísse.

É possível?

Algum exemplo?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

3 respostas a esta questão

Recommended Posts

Você está usando ionic 2?

Eu nunca usei ele.. mas lembro que no ionic 1 era possível.

 

Você viu essa página?

https://ionicframework.com/docs/api/components/item/ItemSliding/

 

Lá no final mostra os eventos que são invocados ao mover o item. A ideia é parecida.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui. Ficou assim:

<ion-item (swipe)="delete(alert)">
    <h2 style="color:darkgrey">{{alert.title}}</h2>
    <ion-icon name="arrow-forward"></ion-icon>
</ion-item>

E no .ts o método delete  normal.. 

 

Valeu, @hargon

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muito bom @itlpps.

Que bom que conseguiu resolver.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por mateus.andriollo
      Alguém sabe uma boa ferramenta (grátis) para comparação de banco de dados Desenvolvimento e Produção.
      Preciso automatizar as atualizações no banco de dados da produção com base no banco de dados de desenvolvimento.
       
      Achei algumas ferramentas mas pagas....
    • Por jl_code
      Não estou conseguindo configurar anúncios do admob no meu app eu segui os tutoriais que achei na internet consegui exibir os anúncios de teste mas quando eu coloco o meu id do admob no codigo ele não exibe os anuncios
    • Por PauLoRM
      Olá,
      Estou querendo desenvolver um aplicativo multi-plataforma (Android e IOS). Projeto para longo prazo (mais de 12 meses), pois como é complexo, investirei em conhecimento antes. Já tenho conhecimento básico em lógica de programação, já pratiquei o básico em SQL, Delphi, Oracle (tenho noção de if, else, then, boolean, true, false, string, etc)...trabalho com TI a mais de 10 anos... então acredito no meu potencial...Porém terei que fazer cursos voltados para aplicação mobile, para conseguir implementar meu projeto sem precisar contratar terceiros. Vai ser um aplicativo bem complexo no meu ponto de vista. Em resumo o cliente tem que se cadastrar, vai visualizar produtos de empresas separados por categorias (mais de uma empresa) e poder fazer seus pedidos. As empresas que anunciam seus produtos, vão ter que ter gerenciamento dos pedidos realizados e dos produtos. E eu, terei que ter acesso as vendas dessas empresas, pois serei remunerado sobre esses pedidos feitos no app. Por ser 3 tipos de credenciais diferentes, com acessos à recursos diferentes, telas diferentes, pensei em separar em 3 aplicativos, pois poderia ser muito pesado tudo em um único.
      Um app então será para clientes fazerem o seu cadastro, efetuarem seus pedidos, obter históricos, etc. Outro será para gestão de pedidos e cadastros de produtos pelas empresas credenciadas. E o outro, seria gerencial para mim (dono do app), pois haverá comissão para mim pelos pedidos efetuados, terei que gerenciar isso.
      Recursos complexos que gostaria de implementar:
      App de compra dos clientes:
      - Cadastro com possibilidade de conectar com Facebook (Acredito que existe API para isso)
      - Confirmação de cadastro através de código gerado automaticamente (enviado por SMS ou email)
      - Utilização de mapa com posição atual (coordenadas) e se possível cálculo de distância. Ser possível mostrar empresas perto da pessoa por exemplo (Acredito que existe API para isso também)
      - Pagamento online (deve haver varias API (opções) nesse sentido)
      App para gestão (empresas vendedoras):
      Possibilidade de enviar fotos (cadastro de produtos)
      Possibilidade de salvar/enviar email com planilha ou relatório
      Agora meus questionamentos:
      1) Com esses recursos mais complexos, qual linguagem melhor me atenderia(Xamarin, FireMonkey, Ionic, Unity, entre outros)? Se possível mencionar a questão de disponibilidade de materiais e cursos, pontos fortes e fracos referente a recursos e API’s (compatibilidade).
      2) Será necessário um banco de dados externo para armazenar tudo isso (será na nuvem e deverá ser sincronizado). Qual banco poderia ser utilizado? Ouvi falar muito bem do Firebase.
      3) Bem futuramente (caso aplicativo der certo), poderá ser necessário implantar o gerenciamento da empresa também em sistema Web. As decisões anteriores terá interferência? Digo, já devo observar a escolha da linguagem do app e o banco de dados, visando essa futura implantação? Se sim, qual recomendação?

      Como pode ver, preciso de um ponta pé inicial para começar os estudos (pois estudar meses ou anos uma linguagem para depois não conseguir aplicar tais recursos devido a não ter eles, seria perda de tempo e dinheiro). Para isso conto com a ajuda dos mais experientes, vocês. Obrigado desde já!
    • Por mayconyury
      Galera, boa noite.
       
      Estou com dificuldades para realizar um insert em uma tabela no oracle. 
       
      Criei duas lists, uma buscando o código das filiais existentes em uma tabela e outro para receber as filiais de acordo com a escolha do usuário. Estou realizando um cadastro de produtos por filial, então ao terminar o cadastro o dialog pergunta se quer atualizar os dados em outra filial. Se marcada a opção SIM, abre a tela para escolher para qual filial o usuário quer copiar ( update ). Mas pode existir situações onde o produto não existe, então queria que realiza-se um insert para essas filiais ao invés do update.
       
      Alguém pode ajudar?
       
    • Por Kellison Ruan
      Olá galera, Boa tarde!
      Estou com um probleminha em Ionic que está quebrando muito minha cabeça por dias.
      Método de pagamento do paypal aparece em meu site, mas não aparece no app ionic, o que será? Já tentei de tudo. Esse app faz comunicação via API do Woocommerce, e lá está habilitado a forma de pagamento com PayPal, porém só não aparece no app, já que na página de checkout no meu site, aparece.
       
      Segue o código da página de checkout do app:
       
      import { Component, Inject } from '@angular/core'; import { NavController, NavParams, AlertController, Loading, LoadingController, ToastController, App } from 'ionic-angular'; import { PlacedPage } from '../placed/placed'; import { PaymentGateway } from "../../models/payment-gateway.models"; import { Constants } from "../../models/constants.models"; import { WordpressClient } from '../../providers/wordpress-client.service'; import { Global } from '../../providers/global'; import { Subscription } from "rxjs/Subscription"; import { CartItem } from "../../models/cart-item.models"; import { OrderRequest } from "../../models/order-request.models"; import { Address } from "../../models/address.models"; import { ShippingLine } from "../../models/shipping-line.models"; import { UserResponse } from "../../models/user-response.models"; import { OrderResponse } from "../../models/order-response.models"; import { Currency } from "../../models/currency.models"; import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser'; import { sha512 } from 'js-sha512'; import { APP_CONFIG, AppConfig } from '../../app/app.config'; import { OrderUpdateRequest } from '../../models/order-update-request.models'; import { Coupon } from '../../models/coupon.models'; import { HomePage } from '../home/home'; import { TranslateService } from '@ngx-translate/core'; import { Helper } from '../../models/helper.models'; import { ShippingMethod } from '../../models/shipping-method.models'; import { PayPal, PayPalPayment, PayPalConfiguration, PayPalPaymentDetails } from '@ionic-native/paypal'; @Component({ selector: 'page-payment', templateUrl: 'payment.html', providers: [WordpressClient] }) export class PaymentPage { private loading: Loading; private loadingShown: Boolean = false; private placedPagePushed: Boolean = false; private paymentDone: Boolean = false; private paymentFailAlerted: Boolean = false; private subscriptions: Array<Subscription> = []; private paymentGateways = new Array<PaymentGateway>(); private cartItems: Array<CartItem>; private selectedPaymentGateway; private selectedAddress: Address; private orderRequest: OrderRequest; private orderId = -1; private user: UserResponse; private totalItems = 0; private total = 0; private couponApplied = false; private pickupTime = 0; private deliveryTime = 0; private shippingChargeGlobal: number; constructor(@Inject(APP_CONFIG) private config: AppConfig, public translate: TranslateService, private iab: InAppBrowser, private toastCtrl: ToastController, public navCtrl: NavController, private navParams: NavParams, private service: WordpressClient, private loadingCtrl: LoadingController, private alertCtrl: AlertController, public appCtrl: App) { this.cartItems = this.navParams.get('cart'); this.totalItems = this.navParams.get('totalItems'); this.total = this.navParams.get('total'); this.shippingChargeGlobal = this.navParams.get('shippingChargeGlobal'); let paymentGateways = JSON.parse(window.localStorage.getItem(Constants.PAYMENT_GATEWAYS)); this.selectedAddress = JSON.parse(window.localStorage.getItem(Constants.SELECTED_ADDRESS)); if (paymentGateways != null) { for (let pg of paymentGateways) { if (pg.enabled && this.paymentImplemented(pg.id)) { this.paymentGateways.push(pg); } } } } ionViewWillLeave() { this.subscriptions.forEach((subscription: Subscription) => { subscription.unsubscribe(); }); this.dismissLoading(); } paymentImplemented(id) { return id === "pumcp" || id === "payuindia" || id === "cod"; } paymentMethod(paymentGateway) { this.selectedPaymentGateway = paymentGateway; } placedPage() { if (this.selectedPaymentGateway == null) { this.translate.get('field_error_payment_method').subscribe(value => { this.showToast(value); }); } else { this.orderRequest = new OrderRequest(); this.orderRequest.payment_method = this.selectedPaymentGateway.id ? this.selectedPaymentGateway.id : "cod"; this.orderRequest.payment_method_title = this.selectedPaymentGateway.title ? this.selectedPaymentGateway.title : "cod"; this.orderRequest.set_paid = false; this.orderRequest.billing = this.selectedAddress; this.orderRequest.shipping = this.selectedAddress; this.user = JSON.parse(window.localStorage.getItem(Constants.USER_KEY)); this.orderRequest.customer_id = String(this.user.id); let selectedShippingMethod: ShippingMethod = JSON.parse(window.localStorage.getItem(Constants.SELECTED_SHIPPING_METHOD)); if (selectedShippingMethod) { let shippingTotal = 0; for (let ci of this.cartItems) { if (!ci.product.shipping_cost_use_global && ci.product.shipping_cost != 1) shippingTotal = shippingTotal + ci.product.shipping_cost; } if (this.shippingChargeGlobal != -1) { shippingTotal = shippingTotal + this.shippingChargeGlobal; } this.orderRequest.shipping_lines = new Array<ShippingLine>(); this.orderRequest.shipping_lines.push(new ShippingLine(selectedShippingMethod.method_id, selectedShippingMethod.method_title, String(shippingTotal))); } this.orderRequest.line_items = this.cartItems; for (let item of this.orderRequest.line_items) { item.product = null; } this.translate.get('order_creating').subscribe(value => { this.presentLoading(value); }); let coupon: Coupon = JSON.parse(window.localStorage.getItem(Constants.SELECTED_COUPON)); let subscription: Subscription = this.service.createOrder(window.localStorage.getItem(Constants.ADMIN_API_KEY), this.orderRequest).subscribe(data => { this.orderId = data.id; if (coupon) { this.applyCoupon(coupon); } else { this.orderPlaced(); } }, err => { console.log(err); this.dismissLoading(); let orderId = Helper.extractOrderIdFromError(err); if (orderId != -1) { this.orderId = orderId; if (coupon) { this.applyCoupon(coupon); } else { this.orderPlaced(); } } else { this.translate.get('order_failed').subscribe(value => { this.showToast(value); }); this.appCtrl.getRootNav().setRoot(HomePage); } }); this.subscriptions.push(subscription); } } applyCoupon(coupon) { let couponSubs: Subscription = this.service.applyCouponCode(window.localStorage.getItem(Constants.ADMIN_API_KEY), String(this.orderId), coupon.code).subscribe(data => { this.couponApplied = true; window.localStorage.removeItem(Constants.SELECTED_COUPON); this.translate.get('confirm_order_coupon_applied').subscribe(value => { this.showToast(value); }); this.orderPlaced(); }, err => { console.log(err); this.dismissLoading(); }); this.subscriptions.push(couponSubs); } orderPlaced() { this.dismissLoading(); if (this.selectedPaymentGateway.id && this.selectedPaymentGateway.id === "cod") { this.clearCart(); this.navCtrl.setRoot(PlacedPage); } else if (this.selectedPaymentGateway.id === "pumcp" || this.selectedPaymentGateway.id === "payuindia") { this.initPayUMoney(); } else { this.translate.get('order_placed_cod').subscribe(value => { this.showToast(value); }); this.clearCart(); this.navCtrl.setRoot(PlacedPage); } } initPayUMoney() { let name = this.user.first_name && this.user.first_name.length ? this.user.first_name : this.user.username; let mobile = this.user.username; let email = this.user.email; let bookingId = String(Math.floor(Math.random() * (99 - 10 + 1) + 10)) + this.orderId; let productinfo = this.orderId; let salt = this.config.payuSalt; let key = this.config.payuKey; let amt = this.couponApplied ? this.total : this.totalItems; let string = key + '|' + bookingId + '|' + amt + '|' + productinfo + '|' + name + '|' + email + '|||||||||||' + salt; let encrypttext = sha512(string); //let url = "payumoney/payuBiz.html?amt=" + amt + "&name=" + name + "&mobileNo=" + mobile + "&email=" + email + "&bookingId=" + bookingId + "&productinfo=" + productinfo + "&salt=" + salt + "&key=" + key; let url = "payumoney/payuBiz.html?amt=" + amt + "&name=" + name + "&mobileNo=" + mobile + "&email=" + email + "&bookingId=" + bookingId + "&productinfo=" + productinfo + "&hash=" + encrypttext + "&salt=" + salt + "&key=" + key; let options: InAppBrowserOptions = { location: 'yes', clearcache: 'yes', zoom: 'yes', toolbar: 'no', closebuttoncaption: 'back' }; const browser: any = this.iab.create(url, '_blank', options); browser.on('loadstop').subscribe(event => { browser.executeScript({ file: "payumoney/payumoneyPaymentGateway.js" }); if (event.url == "http://localhost/success.php") { this.paymentSuccess(); browser.close(); } if (event.url == "http://localhost/failure.php") { this.paymentFailure(); browser.close(); } }); browser.on('exit').subscribe(event => { if (!this.paymentDone && !this.paymentFailAlerted) { this.paymentFailure(); } }); browser.on('loaderror').subscribe(event => { this.showToast('something_went_wrong'); }); } paymentFailure() { this.paymentFailAlerted = true; let subscription: Subscription = this.service.updateOrder(window.localStorage.getItem(Constants.ADMIN_API_KEY), String(this.orderId), new OrderUpdateRequest('cancelled')).subscribe(data => { }, err => { console.log(err); }); this.subscriptions.push(subscription); this.translate.get(['payment_fail_title', 'payment_fail_message', 'ok']).subscribe(res => { let alert = this.alertCtrl.create({ title: res.payment_fail_title, message: res.payment_fail_message, buttons: [{ text: res.ok, role: 'cancel', handler: () => { this.done(); console.log('Okay clicked'); } }] }); alert.present(); }); } paymentSuccess() { this.paymentDone = true; this.clearCart(); this.translate.get('just_a_moment').subscribe(value => { this.presentLoading(value); }); let subscription: Subscription = this.service.updateOrder(window.localStorage.getItem(Constants.ADMIN_API_KEY), String(this.orderId), { set_paid: true }).subscribe(data => { this.done(); }, err => { this.done(); this.paymentSuccess(); console.log(err); }); this.subscriptions.push(subscription); } done() { if (!this.placedPagePushed) { this.placedPagePushed = true; this.dismissLoading(); this.appCtrl.getRootNav().setRoot(this.paymentFailAlerted ? HomePage : PlacedPage); } } private presentLoading(message: string) { this.loading = this.loadingCtrl.create({ content: message }); this.loading.onDidDismiss(() => { }); this.loading.present(); this.loadingShown = true; } private dismissLoading() { if (this.loadingShown) { this.loadingShown = false; this.loading.dismiss(); } } private presentErrorAlert(msg: string) { let alert = this.alertCtrl.create({ title: 'Error', subTitle: msg, buttons: ['OK'] }); alert.present(); } showToast(message: string) { let toast = this.toastCtrl.create({ message: message, duration: 3000, position: 'bottom' }); toast.onDidDismiss(() => { console.log('Dismissed toast'); }); toast.present(); } clearCart() { let cartItems = new Array<CartItem>(); window.localStorage.setItem('cartItems', JSON.stringify(cartItems)); } }  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.