zoukankan      html  css  js  c++  java
  • 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();
       
      }

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

  • 相关阅读:
    一些你可能用到的代码
    iOS 键盘下去的方法
    iOS设计模式汇总
    随笔
    Spring cloud config 分布式配置中心 (三) 总结
    Spring cloud config 分布式配置中心(二) 客户端
    Spring cloud config 分布式配置中心(一) 服务端
    jdbcUrl is required with driverClassName spring boot 2.0版本
    JpaRepository接口找不到 spring boot 项目
    解决IntelliJ “Initialization failed for 'https://start.spring.io'
  • 原文地址:https://www.cnblogs.com/summer-qd/p/9605414.html
Copyright © 2011-2022 走看看