微信小程序 表单 选择跳转新页面,选择后,返回上一页面保留原页面已填写的值

这篇具有很好参考价值的文章主要介绍了微信小程序 表单 选择跳转新页面,选择后,返回上一页面保留原页面已填写的值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

场景:
表单页有很多项需要填写,个别项数据较多,需要跳转到新的页面去选择后,带着结果返回。如图。
此时,想要返回时,已经填写过的内容保留不变,不被清空。小程序查询结果保留在页面再次查询时上次查询的结果不丢失,小程序,微信小程序,小程序
解决:
在下一页去获取上一页data中的数据,并修改,再通过wx.navigateBack({ delta: 1, })返回上一页,页面不会刷新,且所有数据都在。

代码:
表单页

<view class="form-item" wx:if="{{isFresh==1}}">
  <view class="title">载具</view>
  <view class="content" bindtap="bindSelectBasket">
    {{baseInfo.basketGoodsName ? baseInfo.basketGoodsName : '请选择'}}
    <view class="">
     <image class="pop-image" src="https://retail.benlai.com/fortune/images/bmw/downArrow.png"></image>
    </view>
  </view>
 </view>
bindSelectBasket() {
      wx.navigateTo({
        url: '/page/newProductDeclaration/selectBasket/selectBasket?regionCode=' + this.data.baseInfo.regionCode
      });
},

子页面

 <view class="vendor-container">
   <view class="vendor-item {{!item.goodsSelect ? 'theme-grey' : ''}}" wx:for="{{vendorList}}" wx:for-index="index"
         wx:for-item="item" data-basketGoodsNo="{{item.goodsNo}}" data-basketGoodsName="{{item.goodsName}}" wx:key="index" data-item="{{item}}" bindtap="vendorItemClick">
     <view class="title">
       <view>{{item.goodsName}}</view>
     </view>
     <view class="sub-title">
       <view>规格:{{item.spec}}</view>
     </view>
     <view class="sub-title">
      <view>编号:{{item.goodsNo}}</view>
     </view>
   </view>
 </view>
vendorItemClick(e) {
    var pages = getCurrentPages();
    // var currPage = pages[pages.length - 1]; //当前页面
    var prevPage = pages[pages.length - 2];
    prevPage.setData({
      "baseInfo.basketGoodsName": e.currentTarget.dataset.basketgoodsname,
      "baseInfo.basketGoodsNo": e.currentTarget.dataset.basketgoodsno
    })
    wx.navigateBack({
      delta: 1,
    })
  },

参考:
微信小程序 表单 选择跳转新页面 返回页面保留原页面已填写的值文章来源地址https://www.toymoban.com/news/detail-532405.html

到了这里,关于微信小程序 表单 选择跳转新页面,选择后,返回上一页面保留原页面已填写的值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序:跳转页面

    实际调用需要根据自己业务实际情况决定,虽然各种方式一定程度上能减少内存损耗,但是业务上面流转优化才是最终要满足的,一定要从业务流转去优化去考虑,不要为了性能增加了流转复杂度 1、wx.navigateTo 保留当前页面,跳转到应用内的某个页面。可以通过调用  wx.na

    2024年02月03日
    浏览(67)
  • 微信小程序页面跳转方式+跳转小程序

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 跳转到其他页面(非tabBar页) 返回上一页面或返回多级页面 首先需要在当前小程序app.json中定义:需要跳转的小程序的app-id app.josn文件: 第一种方法:wx.

    2024年02月12日
    浏览(83)
  • 微信小程序之页面跳转

    1、wx.navigateTo( ): 功能:保留当前页面,跳转到应用内的某个页面。 特点:跳转后原页面保留在后台,可以通过 wx.navigateBack() 返回到原页面,新页面显示在原页面之上,有返回按钮。 2、wx.redirectTo( ): 功能:关闭当前页面,跳转到应用内的另一个页面。 特点:跳转后原页面

    2024年04月23日
    浏览(60)
  • 微信小程序(四)页面跳转

    注释很详细,直接上代码 上一篇 新增内容 1.相对路径页面跳转 2. 绝对路径页面跳转 index.wxml 效果演示: 跳转之后 下一篇

    2024年01月19日
    浏览(49)
  • 微信小程序页面返回操作拦截

    返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口 微信小程序没有提供类似 onBackPress 监听页面返回的api,在某些特定场景下,业务收到了限制 为了解决这一限制,本文提供了两种较为常用的解决方案 方案一 重写navigationBar 目的是重写左上角返回按钮

    2024年02月08日
    浏览(72)
  • 微信小程序如何跳转页面

    微信小程序跳转页面可以通过 wx.navigateTo 函数来实现。具体步骤如下: 首先,在app.json文件中配置需要跳转的目标页面,例如: 在原始页面的js文件中,调用 wx.navigateTo 函数,跳转到目标页面,例如: 其中, url 参数指定要跳转的目标页面路径。 如果要在目标页面接收传递参

    2024年02月09日
    浏览(53)
  • 微信小程序页面跳转方法

    微信小程序页面跳转的各种方法总结,备查。 保留当前页面,跳转到应用内的某个页面。可以通过调用 wx.navigateBack 返回到原页面。跳转后左上角出现返回小箭头,点击后可返回原本页面。示例代码: 使用场景 适用于需要跳转到新页面并保留原页面状态的情况,比如从列表

    2024年02月04日
    浏览(48)
  • 微信小程序—点击实现页面跳转

    1.按钮button标签通过bindtap属性绑定点击事件实现页面跳转。 2.但需注意,跳转到tabBar页面和非tabBar页面所调用的函数方法不一样。 跳转到TabBar页面需用wx.switchTab()方法 3.而 跳转到非tabBar页面用wx.navigateTo()方法

    2024年02月11日
    浏览(62)
  • 微信小程序事件和页面跳转

    一、页面跳转 1.非TabBar页面 一个小程序拥有多个页面,我们通过wx.navigateTo进入一个新的页面 我们通过下边点击事件实现页面跳转进行代码实现及参考 wx.navigateBack()回退到上一个页面 wx.redirectTo(url)删除当前页面跳转到指定页面 2.TabBar页面: wx.switchTab只能打开TabBar 3.其他

    2023年04月09日
    浏览(48)
  • 微信小程序点击跳转页面

         第一步:index.wxml 第二步:index.js 以下是点击跳转的详情页面: xiang.wxml: xiang.wxss:

    2024年02月14日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包