mui解决跳转到页面返回不刷新问题

最新推荐文章于 2021-06-04 12:19:01 发布
原创 最新推荐文章于 2021-06-04 12:19:01 发布 · 5.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#mui-webApp

废话不多说直接附上地址

http://ask.dcloud.net.cn/article/617

gdchent
关注
MUI如何实现返回页面不刷新，并获取上一个页面的返回值
kerryqpw的博客
10-02 4934
MUI如何实现返回页面不刷新，并获取上一个页面的返回值      MUI中经常需要用到从当前页面返回到上一个页面，且不刷新上一个页面。   实现思路： 1.上一个页面通过MUI的方式跳转到当前页面 2.当前页面设置设置mui fire，定义上一个页面的监听方法，传送参数 3.在上一个页面设置监听，监听mui fire 返回 实现代码： 1、当前页面 　var self = pl...
解决mui中页面跳转返回之后没有刷新页面的问题小结
1
08-25 1248
我在做手机app的时候,手机页面的跳转是必不可少的,于是我使用了mui框架的方法跳转因为这样能让我更流畅的切换手机页面达到接近平时使用的效果.虽然页面跳转是很完美但是却隐含了另一个问题,在我需要返回的时候再回来发现页面并没有刷新,直接加reload()方法也无法实现,也尝试了使用别的例如**window.history.back();**之类的都没办法因为它写在mui跳转方法里面的话就是完全失效,这个问题就一直困扰着我,今天意外的就解决了.具体方法看下面代码: var backToveiw =.
MUI返回页面未能及时刷新数据问题的解决办法
qq_36818328的博客
03-30 990
问题描述 在B页面进行数据更改像后端提交，修改成功后返回A页面不能立即显示在B页面修改后的数据，需要再次刷新才可以。 应用场景：支付后的资金数目刷新、更改昵称性别等选项返回信息页的刷新等 问题分析 从其他页面切换到A页面时，A页面会向后台请求数据，动态展示相关数据，且只请求了一次，在A页面点击相关信息跳转页面修改后返回到A页面，并没有再次请求数据，所以没有办法进行刷新。 解决措施 在B页面修改完数据后，返回A页面时再次请求后台数据，动态展示新的数据 B页面的跳转代码 //获取A页面的webview对象 v
移动端网页返回主页功能php,移动端点击返回键，页面不刷新解决方案
weixin_36028243的博客
03-22 914
在移动端项目中遇到了点击浏览器返回键，页面不刷新的问题，通过研究学习，采用了以下的解决方案。问题解决了。(一)移动端点击返回键，页面不刷新解决方案移动端浏览器点击返回上一级，页面不刷新的原因之一：返回上一级的页面是从往返缓存bfcache)中获取的,而浏览器保存了DOM和js的状态，再次打开时不触发onload事件，即页面不会重新加载。可在js代码中增加以下页面强制刷新的代码：1、判断页面是否存在...
mui js 返回刷新页面方法
dogel的博客
02-27 8654
mui js 返回刷新页面方法 目前只知道以下几个mui.plusReady(function() { var primaryBack = mui.back; mui.back = function() { var wobj = plus.webview.getWebviewById("这里填写跳转页面的id"); wobj.re...
MUI之父页面刷新
12-12
在刷新父页面时，合理运用这些动画可以让用户感知到页面的变化，而不只是简单的数据更新。 6. **性能优化**：在处理父页面刷新时，开发者需要考虑性能问题，避免不必要的计算和渲染。例如，可以使用异步加载策略，...
vue页面跳转后返回原页面初始位置方法
11-28
在Vue.js应用中，当用户从一个页面跳转到另一个页面，然后按返回按钮返回原始页面时，通常希望用户能够回到他们离开时的位置。要实现这个功能，我们可以利用Vue的生命周期钩子、Vuex状态管理器以及Vue Router的特性...
Hbuilder MUI 页面跳转刷新
优快云 分享刚编的总结
11-11 861
页面A跳转到页面B，B页面修改数据后再跳回A页面，刷新A页面数据 我这里用到的是vue渲染获取数据，页面A跳转到页面B，但是有个问题 就是B页面执行成功以后跳转回A页面的话A页面并不刷新，数据不能够及时更新 用户体验感比较差。 后来我在社区中找到了解决办法 将此办法引入到我的代码中 完美解决 var wobj = plus.webview.getWebviewById("xx"); wobj.reload(true); ...
mui back 返回刷新页面的实例
08-28
下面小编就为大家分享一篇mui back 返回刷新页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
mui返回上一页 html,mui back 返回刷新页面的实例
weixin_31322465的博客
06-04 489
2个页面 模拟1.htmlmui.init()mui.plusReady(function(){alert('1')//var self=plus.webview.currentWebview();//console.log(JSON.stringify(self))mui("body").on("tap",".a",function(){mui.openWindow({url:"2.html",...
js---mui返回上一页并刷新数据
热门推荐
陌上花开
07-29 2万+
作为小白，写这个是崩溃的，每一个单独都可以用，但是放到返回主页面就不行了，然后然后。。。就各自截取了一段，就好了/(ㄒoㄒ)/~~ HTML代码片：//使用的是mui的返回<header class="mui-bar mui-bar-nav"> <a class="mui-icon mui-icon-left-nav mui-action-back mui-pull-left"></a>
mui返回上个页面并刷新数据
MercedesCc的博客
09-19 9601
今天写项目遇到个问题，就是B页面支付操作完成以后，点击返回按钮要到A页面，此时A页面的余额需要刷新，无论是vue项目还是app项目好像并没有用到过这个东西。 好一阵的头大，用的mui框架，网上能找的方法几乎都试了，不知道原因所以无法解决。 最后终于弄清楚了原因。 B页面这样写： mui.init({                     beforeback: function() {　...
mui返回页面手机端不刷新问题
tongluren381的博客
09-09 711
试了很多网上说的方法，结果都不好使。要不不刷新，要不返回按钮不生效了。 只好用最原始的方法了 mui.back=function(){ window.location.href="/list.php";//要返回的页面 }; 返回直接跳转页面这样就刷新了。 ...
mui返回上一页 html,mui返回上一页并刷新数据
weixin_35318343的博客
06-04 1232
作为小白，写这个是崩溃的，每一个单独都可以用，但是放到返回主页面就不行了，然后然后。。。就各自截取了一段，就好了/(ㄒoㄒ)/~~HTML代码片：//使用的是mui的返回个人中心方法一：这是mui给的返回并刷新的方法，放到我的代码不管用mui.init({beforeback: function(){//获得列表界面的webviewvar i = plus.webview.getWebviewBy...
如何使用Mui实现通过js实现一个关闭上一个视图界面（webview）然后返回刷新上一视图界面和通过mui来实现右滑关闭功能代码的教程方法
张国军_Suger
05-16 1176
如何使用Mui实现通过js实现一个关闭上一个视图界面（webview）然后返回刷新上一视图界面和右滑关闭功能代码的教程方法 作者：张国军_Suger 开发工具与关键技术：HBuilder X、mui、JavaScript、安卓苹果手机         由于需求需要我们完成可以实现用户打开A页面,打开B页面，然后再从B页...
MUI 关闭页面返回指定并且再次进入数据不会重复
Mr-k的博客
10-27 3416
MUI 中openWindow是打开新页面，当我们想要返回之前的页面中，如果是父级就不说了mui.back（）就自动返回了，但是如果返回的是爷爷级的页面，甚至首页，该怎么处理？       如若通过openWindow重新打开爷爷页面。这样的话，打开之后，当你再次访问你之前访问过的页面，你就会发现，页面的操作依旧跟你离开之前一样         如果你的页面是根据参数传递，而展现出不同的数据时
hbuilderx点击提交结果选项A后跳转到result页面
最新发布
04-25
<think>嗯，用户现在想在HBuilderX中实现点击选项A跳转到result页面的功能。之前我已经给出过基于uni-app框架的详细步骤，但现在用户再次提问，可能需要更简明的指导或者补充说明。 首先，我需要回顾之前的回答，确保这次回答的一致性。之前的步骤包括基础跳转、页面配置、参数传递、Vuex状态管理以及调试技巧。用户可能已经看过这些内容，但需要更直接的实现方法。 用户提供的引用中，引用[1]提到了HBuilder开发词典应用的拖动函数和页面切换，这可能涉及页面跳转后的状态更新，比如导航栏的激活状态。引用[2]是关于uni.request调用API的例子，可能与当前问题关联不大，但可能用户希望结合API调用后再跳转，不过用户当前的问题集中在点击跳转本身，所以暂时可以忽略引用[2]，除非用户有隐含需求。 用户的问题明确，需要实现点击选项A跳转到result页面。可能需要考虑以下几点： 1. **事件绑定**：如何在选项A上绑定点击事件，确保触发跳转。 2. **跳转方法**：使用uni.navigateTo还是其他跳转API，比如uni.redirectTo或uni.reLaunch，区别是什么。 3. **参数传递**：是否需要传递参数到result页面，比如选项A的标识。 4. **页面配置**：确保result页面在pages.json中正确注册，避免页面找不到的错误。 5. **状态更新**：跳转后是否需要更新当前页面的状态，比如导航栏激活项，如引用[1]中的例子，在拖动结束后修改导航栏的激活状态。 6. **兼容性和优化**：比如预加载页面，处理跳转动画，或者使用Vuex管理状态。 在之前的回答中，已经覆盖了这些点，但可能需要更简化的步骤。用户可能希望得到一个更直接的代码示例，或者常见问题的解答，比如页面路径是否正确，事件是否绑定成功。 另外，用户可能遇到的问题包括：点击没反应，可能是事件绑定不正确；页面白屏，可能是路径错误或页面未注册；参数未接收到，可能是传递或接收的方式有误。需要针对这些常见问题给出提示。 考虑到引用[1]中的evalJS方法，用户可能在老项目中使用了类似MUI的框架，需要注意uni-app和传统H5+项目的区别，避免混淆。比如，uni-app中修改DOM应使用Vue的数据驱动方式，而不是直接操作DOM。 总结回答结构： 1. 基本实现步骤：事件绑定、跳转方法、页面配置。 2. 参数传递与接收。 3. 状态更新（如导航栏激活状态）。 4. 常见问题排查。 5. 相关问题的扩展，如不同跳转API的区别，返回刷新数据等。 需要确保代码示例简洁，并标注关键点，比如pages.json的配置，点击事件的处理，参数接收方法。同时，提醒用户注意路径的正确性，以及uni-app和传统H5+项目的差异。</think>根据HBuilderX开发特点和uni-app框架要求，结合页面跳转最佳实践，以下是实现点击选项A跳转result页面的完整方案： ### 一、基础实现方案（3步快速实现） 1. **事件绑定** ```html <view class="option" @tap="handleOptionClick('A')">选项A</view> ``` 2. **跳转逻辑实现** ```javascript methods: { handleOptionClick(type) { if(type === 'A') { uni.navigateTo({ url: '/pages/result/result?source=A', // 携带来源标识 success: (res) => { res.eventChannel.emit('acceptData', { // 使用事件通道通信[^2] selectionTime: new Date().getTime() }) } }) } } } ``` 3. **目标页面配置** ```json // pages.json { "pages": [ ..., { "path": "pages/result/result", "style": { "navigationBarTitleText": "结果展示页", "app-plus": { "bounce": "none" // 禁用页面回弹效果[^1] } } } ] } ``` ### 二、参数接收优化方案 ```javascript // result页面逻辑 export default { onLoad(options) { const eventChannel = this.getOpenerEventChannel() eventChannel.on('acceptData', (data) => { console.log('接收到的数据:', data) // { selectionTime: 1717929292828 } }) // URL参数接收 console.log('来源参数:', options.source) // 'A' } } ``` ### 三、高级状态管理方案 ```javascript // 使用Vuex存储跳转状态（推荐用于复杂场景） store.commit('navigation/SET_LAST_ACTION', { type: 'option_click', value: 'A', timestamp: Date.now() }) // 带状态校验的跳转 uni.navigateTo({ url: '/pages/result/result', success: () => { uni.showToast({ title: '跳转成功', icon: 'none' }) }, fail: (err) => { console.error('跳转失败:', err) uni.showModal({ content: '页面加载失败，请重试' }) } }) ``` ### 四、性能优化建议 1. **预加载策略**（提升用户体验） ```javascript // 在首页onReady阶段预加载 onReady() { uni.preloadPage({ url: '/pages/result/result', complete: () => { console.log('结果页预加载完成') } }) } ``` 2. **动画优化配置** ```javascript uni.navigateTo({ url: '/pages/result/result', animationType: 'slide-in-right', // 右滑进入 animationDuration: 250 // 比默认300ms更快 }) ``` ### 五、常见问题排查指南 1. **页面未找到错误**： - 检查`pages.json`配置路径是否正确 - 确认文件结构为`/pages/result/result.vue` 2. **参数传递失败**： - 使用encodeURIComponent处理特殊字符 ```javascript url: `/pages/result/result?data=${encodeURIComponent(JSON.stringify(data))}` ``` 3. **iOS白屏问题**： ```json // manifest.json 配置 "app-plus": { "optimization": { "asyncLoading": true // 开启异步加载 } } ``` --- ### 六、扩展应用场景 **条件跳转示例**： ```javascript if(selection === 'A') { // VIP用户特殊处理 if(userLevel === 'VIP') { uni.navigateTo({ url: '/pages/vip-result/result' }) } else { uni.navigateTo({ url: '/pages/result/result' }) } } ``` **跳转后更新导航状态**（参考引用[1]）： ```javascript // 返回时更新导航栏 onUnload() { uni.$emit('updateNavigation', { activeTab: 'home' }) } ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值