初学小程序,碰到列表与详情页跳转遇到的问题,记录一下。

一、问题

1个列表页:

1个详情页:

列表页代码:

onLoad:异步查询数据并setData

详情页代码:

保存成功后,调用navigateBack

问题来了,从详情页跳转回列表页后,页面不刷新,还是修改前的列表。

二、解决过程

1、将详情页保存成功后的代码改为navigateTo列表页

可以刷新了,但是又有新问题,来回在列表、详情页之间切换几次后就点不动了。

原因:wx.navigateTo只能跳转5层,跳转5次后就不能跳了

2、详情页保存成功后,还用navigateBack,列表页加载数据的代码改为在onShow方法里实现,问题解决。

原因:因为onLoad只在页面第一次显示时调用,而onShow在每次显示时都调用。所以,写在onShow里后,从详情页navigateBack后,会重新加载数据并刷新。

微信小程序页面列表与详情页跳转的正确姿势的更多相关文章

  1. 微信小程序转发商品的详情页 + 转发功能(传参)

    1.微信小程序转发传参,利用的还是onShareAppMessageapi 2.利用的还有json转换 JSON 是用于存储和传输数据的格式. JSON 通常用于服务端向网页传递数据 函数 描述JSO ...

  2. 微信小程序页面3秒后自动跳转

    setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式. 语法格式可以是以下两种:   setTimeout(function () { // wx.r ...

  3. [转] 微信小程序页面间通信的5种方式

    微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...

  4. 微信小程序新闻列表功能(读取文件、template模板使用)

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

  5. 在微信小程序页面间传递数据总结

    在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...

  6. 微信小程序页面跳转方法总结

    微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...

  7. 微信小程序页面调用自定义组件内的事件

    微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...

  8. 微信小程序页面通信

    目录 微信小程序页面通信 方式一:通过URL 方式二:通过全局变量 方式三:通过本地存储 方式四:通过路由栈 微信小程序页面通信 方式一:通过URL // A 页面 wx.navigateTo({ u ...

  9. 微信小程序-页面跳转与参数传递

    QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...

随机推荐

  1. iview table 实现在数据中自定义标识

    做了一个商旅订票的项目,在详情中有一个因公超标在表格中用一个“超”字显示的需求.后台框架用的iview+vue,也就是在iview Table中改变.在iview的框架中改变东西首先要想到的是ivie ...

  2. java.lang.IllegalStateException: ApplicationEventMulticaster not initialized - call 'refresh' before multicasting events via the context 错误

    spring boot 项目启动报错:原因一般是注入了相同名字的service -- :: com.gxcards.mes.MainWwwWeb: logStartupProfileInfo INFO ...

  3. 【实战问题】【4】Vue写的页面在微信手机端和微信web开发者工具中都能正常显示,但是在微信pc端上显示空白

    原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在 ...

  4. 学习node.js的一些笔记

    最近看了几眼node.js,以前曾听说它用途很大. 在菜鸟教程上,已看了过半的内容:http://www.runoob.com/nodejs/nodejs-web-module.html,如今看到了这 ...

  5. python网络爬虫&&爬取图片

    爬取学院官网数据from urllib.request import * #导入所有request urllib文件夹,request只是里面的一个模块from lxml import etree # ...

  6. python小游戏,石头/剪子/布

    #从控制台输入石头(1)/剪子(2)/布(3) player=int(input("玩家出拳 石头(1)/剪子(2)/布(3)")) #电脑随机出拳 computer comput ...

  7. raid卡的结构示意图

    raid卡的结构示意图,取自<大话存储>第124页 ROM:一般用FLash芯片做ROM,存放着初始化RAID卡必须的代码以及实现RAID功能所需的代码; XOR芯片:专门用来做RAID ...

  8. strcpy_s和strcpy()

    转自: https://www.cnblogs.com/hrhguanli/p/4570093.html strcpy_s和strcpy()函数功能几乎相同.strcpy函数.就象gets函数一样,它 ...

  9. 使用JS判断不同的终端设备

    const ua: string = window.navigator.userAgent; const isWeixin: boolean = /MicroMessenger/i.test(ua); ...

  10. ionic3+angular4的三方微信开发(登录and分享)

    登录: 1.在微信开放平台注册开发者帐号,并拥有一个已审核通过的移动应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程. 2.通过cordova添加微信插件:进 ...