首页 > 编程语言 >uniapp小程序,携带参数返回上一页

uniapp小程序,携带参数返回上一页

时间:2024-06-12 17:28:41浏览次数:18  
标签:uniapp 收货 携带 address item 地址 一页 pages 页面

功能介绍:

这是我在开发微信小程序时实现的一个功能,在提交订单页面(A页面)点击设置收货地址跳转到地址列表页面(B页面)去选择地址后回退到订单页面并显示所选择的地址。

具体实现:

<!-- HTML结构不完整,仅做参考,部分类名为作者项目中的配置 -->
<view class='addressCon' v-if="shippingType == 1 && JSON.stringify(address) != '{}'" @tap='goAddress'>
    <view class='name'>{{ address.realName }}
       <text class='phone ml50'>{{ address.phone }}</text>
    </view>
    <view class="acea-row">
       <text class='default font-color' v-if="address.isDefault === 1">[默认]</text>
       <text class="line2">{{ address.province }}{{ address.city }}{{ address.district }}{{address.detail}}</text>
    </view>
</view>
<view class='addressCon' v-else @tap="goAddress">
    <view class='setaddress'>设置收货地址</view>
</view>
goAddress() {
   uni.navigateTo({
     url: '/pages/users/address_list/index'
   })
}

如图,提交订单页面中,我们给设置收货地址的盒子绑定事件,跳转到收货地址列表页面,在这个页面我们可以对地址进行新增、编辑、删除等操作

<!-- HTML结构不完整,仅做参考,部分类名为作者项目中的配置 -->
<view class='item borRadius14' v-for="(item, index) in addressList" :key="item.id">
	<view class='address' @tap='chooseAddress(item)'>
		<view class='consignee'>收货人:{{ item.realName }}<text class='phone'>{{ item.phone }}</text></view>
		<view>收货地址:{{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}</view>
	</view>
	<view class='operation acea-row row-between-wrapper'>
	  <radio class="radio" :value="index" :checked="item.isDefault === 1"><text>设为默认</text></radio>
	  <view class='acea-row row-middle'>
	    <view @tap='editAddress(item.id)'><text class='iconfont icon-bianji'></text>编辑</view>
		<view @tap='delAddress(item.id)'><text class='iconfont icon-shanchu'></text>删除</view>
	  </view>
	</view>
</view>
<view class='footer acea-row row-between-wrapper'>
	<view class='addressBnt bg-color' @tap='addAddress'>
        <text class='iconfont icon-tianjiadizhi'></text>
        添加新地址
    </view>
</view>

思路:

在回退页面(B页面)的方法中调用 getCurrentPages 函数获取页面栈的实例,然后通过获取上一页面的页面栈的方式去传递数据。

实现的方法有两种,一种是直接去改变原来页面(A页面)的数据,另一种就是通过调用原来页面(A页面)的方法再去改变页面数据。

chooseAddress(item) {
      // item 是需要传递的地址对象数据
	  let pages = getCurrentPages() // 使用getCurrentPages获取页面栈的实例
	  let prePage = pages[pages.length - 2] // 上一页面

      // 方式一:直接修改上一页面的数据,把地址对象赋值过去
	  prePage.$vm.address = item
        
      // 方式二:通过调用上一页面的方法,需要在A页面中定义处理地址对象的方法
      // prePage.$vm.editAddress(item)
	  uni.navigateBack() // 返回上一页
}

标签:uniapp,收货,携带,address,item,地址,一页,pages,页面
From: https://blog.csdn.net/qq_59572992/article/details/139627979

相关文章