• ionic3 带数据返回上一页


    确认订单添加地址功能

    进入确认订单页面

    点击添加地址,进入地址列表页面

    点击地址列表返回确认订单页面,带回所选地址

    具体实现:

    确认订单添加地址代码如下

    <ion-list>
          <ion-item (click)="goAddress()" *ngIf="addressFlag == false">
            <ion-avatar item-start>
              <img src="../../assets/imgs/add_address.png">
            </ion-avatar>
            <p>添加收货地址</p>
          </ion-item>
    </ion-list>

    执行 goAddress()方法

      goAddress() {
        let data: Object = {  order:1,  callback: data => { //回调函数,返回页面的数据在回调函数中处理
          console.log(data.info)
              this.addressFlag = false;
              this.name = data.info.name;
              this.phone = data.info.phone;
              this.address = data.info.address;
            } 
          };
        this.navCtrl.push(AddressPage,data);//确认订单页面 挑战到地址列表页面
      }

    地址列表页面 

    <ion-list class="mb80">
        <ion-item no-padding class="no-border-top mb10" *ngFor="let item of addressLists,let i = index">
          <div class="padl15 border-bottom padr15 mt10 padb10" (click)="checkAddress(item)">
            <h2 class="of mb5">
              <span float-left>{{item.name}}</span>
              <span float-right>{{item.phone}}</span>
            </h2>
            <p>
              <span class="red" [hidden]="item.is_default == 'N'">[默认地址]</span> {{item.address}}</p>
          </div>
          <div class="padl15 padr15 of padt5 padb5">
            <div float-left>
              <button ion-button icon-start clear (click)="setAddress(item,addressLists)">
                <ion-icon *ngIf="item.is_default == 'Y'" name="checked"></ion-icon>
                <ion-icon *ngIf="item.is_default == 'N'" name="check"></ion-icon>
                默认地址 
              </button>
            </div>
            <div float-right>
              <button ion-button icon-end clear (click)="goEdit(item)">
                <ion-icon name="edit"></ion-icon>编辑</button>
              <button ion-button icon-end clear (click)="delete(item)">
                <ion-icon name="del"></ion-icon>删除</button>
            </div>
          </div>
        </ion-item>
      </ion-list>

    执行 checkAddress(item)方法

     //确认订单-选择地址
      checkAddress(item) {
        let callback = this.navParams.get('callback');
        let data: Object = {
          info: item
        };
        callback(data);
        this.navCtrl.pop();
       
      }

    这样就完成了带参数返回页面

  • 相关阅读:
    五角星评分小例子
    手风琴案列
    隔行变色
    全选和单选(有一个单选没有打钩,全选也自动不打钩)
    随机数封装
    数组的升降序排列
    js面向对象倒计时与文字左右滚动
    linux知识点总结与随笔(关注linux爱好者公众号的一些笔记)
    线程与进程(我的理解)
    @property在python类中的应用
  • 原文地址:https://www.cnblogs.com/summer-qd/p/9605414.html
Copyright © 2020-2023  润新知