1. 程式人生 > >React-Redux 恢復列表頁跳轉明細頁之後返回列表狀態

React-Redux 恢復列表頁跳轉明細頁之後返回列表狀態

場景:

    一、 單頁面web程式中列表頁有1000條資料,點選一條資料跳轉到詳細頁,然後詳細頁放回列表頁儲存列表頁有1000條資料不變。

解決方案

    一、用新視窗開啟詳細頁面不讓使用者返回。

    二、如果是APP模式,監控發起URL地址發現開啟連結型別:_blank,   彈出一個新的 webview視窗去承載詳細頁。

     三、用redux儲存當前列表資料狀態,注入路由鉤子記錄頁面離開時候DOM節點狀態

,在頁面載入完上狀態資料完畢之後將DOM恢復。

探討方案三:

  效果

     

實現程式碼:

      

相關推薦

React-Redux 恢復列表明細之後返回列表狀態

場景:     一、 單頁面web程式中列表頁有1000條資料,點選一條資料跳轉到詳細頁,然後詳細頁放回列表頁儲存列表頁有1000條資料不變。 解決方案     一、用新視窗開啟詳細頁面不讓使用者返回。     二、如果是APP模式,監控發起URL地址發現開啟連結型別:_

vue 列表詳情獲取id的方法

詳情頁路由 { path: 'orderDetails/:id', name: 'orderDetails', component: orderDetails, }, 列表 openDetails(row){ //檢視詳情 t

webapp 使用者登入,登入完返回重新整理使用者

mui專案:我有兩種方案: 1.window.opener.reload() 2.登入頁以彈出層的方式載入,登入完只需重新整理當前就ok created(){       //判斷是否已登入 } vue-cli專案 當前使用 /

HTML中使用者輸錯使用者名稱或密碼,頁面3秒鐘之後返回登入頁面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="re

thinkCMF----列表

field sign request php private render mode his dex thinkCMF列表循環有個:用來循環文章列表。 <php> $where=[ ‘post.create_time‘=>[‘egt‘,0

react native用Listview從列表到詳情

只寫了下功能,樣式沒有寫,大神勿笑。一些需要改進 的地方請大神指點。qq:274501366 話不多說直接上程式碼 index.android.js 'use strict'; import React, {Component} from 'react'; import { A

WebApp-mui列表上拉載入下拉重新整理 詳情

列表頁 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=de

帶有分列表後,返回時怎麼實現保留分數等資訊

我們通過一個列表,進入了下一個頁面,返回列表頁面的時候,怎麼實現保留頁面資料 eg:當我們從列表的第4頁去編輯這條資訊,那麼當編輯完成後我們是不是返回到列表頁,那麼列表頁應該顯示第幾頁的資料呢? 解決方案:(樓主的專案是vue+element)  攜帶引數 當頁面

react axios和ajax網路請求攔截(session過期登入

網路請求攔截經常也可用到,比如在所有介面訊息請求頭部加上驗證資訊token之類的,或者介面報某類錯誤時統一處理。這裡主要用在請求介面時,判斷session是否過期,統一返回狀態碼區分,如果過期了跳轉登入頁重新登入 攔截axios部分 重新封裝axios請求

position:fixed與可scroll的列表之後返回底部div先浮在上面,再恢復正常

在開發中,遇到這樣一個問題。一個頁面中有list列表,可滑動,瀏覽器底部使用position:fixed;bottom:0;固定了一個按鈕。 但是當列表向下滾動之後,跳到下個頁面又返回,底部的元件會有短暫的先在上面,之後又恢復到正常瀏覽器底部。 正常紅框內容是在底部的。

微信瀏覽器頁面後再返回,如何恢復前的位置的問題。

客戶端 his ont 恢復 func 詳情 size light list 以商品列表頁打比方, 眾所周知,點擊商品進入詳情頁要保證不損壞當前列表頁狀態的做法通常是在a標簽上加上target=_blank進行新開一個窗口打開詳情頁 這個做法是非常普遍的,包括很多

使用session處理用戶搜索後數據的上一和下一

sset 上一頁 ade 下拉 soc page arr cat 下拉列表 搜索語句界面: /*單一檢索:此處為一個下拉列表的檢索*/ if(isset($_POST[‘submit‘]) && $_POST[‘submit‘] == ‘點擊搜索‘) {

Android Studio--按鈕

public imp 導入 .text create layout ride tar roi MainActivity.xml: <Button android:id="@+id/btnGo" android:layout_width="wrap_con

樂優商城從商品詳情問題

因為商品詳情頁面是通過leyou-goods-web微服務渲染得到,所以在地址字首中就有item: 所以在此頁面進行跳轉的話,必須將原來的路徑替換,因為如果路徑中還有item的話,又回到了leyou-goods-web中的Controller裡,跳轉失敗。 這個導航條是單獨的一個

H5頁面喚起指定app,有就喚起,沒有則下載

點選按鈕,當已經安裝了app則調起,否則跳轉到應用寶或者App store下載頁面(普通瀏覽器相容,微信有許可權限制,只能每次跳轉下載頁) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

react專案中頁面、重新整理及獲取網路狀態

// 頁面跳轉 window.location.href = 'http://speedtest.wangxiaotong.com/' // 頁面重新整理 window.location.reload() // 獲取當前網路狀態,只能判斷使用者電腦有沒有斷網(包括無線和有線),有網為true,沒有網

wordpress登入後直接回首

Wordpress登入後預設是直接進入後臺的,怎麼改成登入後進入網站首頁或重新進入登入前瀏覽的頁面? 首先定位到登入連結所在位置,你會看到類似下面的程式碼: <a href="<?php echo wp_login_url(); 

react-router 路由控制頁面

剛接觸react,路由使用的react-router 4.0。對於路由在頁面中的跳轉,使用了兩種方法 1,使用widthRouter,他是一個高階元件,他提供了history讓我們使用。 eg:返回上一個頁面,下面是我的實現程式碼。 import React,{Comp

[原始碼]MIUI神隱模式列表以及具體設定介面

MIUI特有一個省電策略模式-神隱模式,如果你的APP需要在息屏情況下一定時間內使用網路、定位或者藍芽等功能,則需要引導使用者去關閉神隱模式或者將你的APP加入神隱模式白名單中,如何正確跳轉正是本篇要進行分析的,分析方法是反編譯系統神隱模式的APK。

Python3.6+Django2.0.2 實現使用者登入+--左側選單+新增使用者資訊--展示使用者資訊

一、環境要求:python版本:Python3.6.4web框架:Django2.0.2開發工具:Eclipse+Pydev資料庫:mysqlweb:html+css+JavaScript二、實現需求:1、使用者登入:使用者登入頁面,輸入使用者名稱、密碼(非加密),通過與資料