1. 程式人生 > >h5快取 和 點選商品列表進入詳情頁點選返回按鈕回到上次開啟列表的位置

h5快取 和 點選商品列表進入詳情頁點選返回按鈕回到上次開啟列表的位置

   最近幾天能研究了一下客戶端的快取以及cookie的用法。

客戶端快取我個人選用一種就是在頭部新增cache-control:max-age=(時間)秒,首先是在html的meta標籤中新增但是在瀏覽器中檢視到沒有起作用,通過檢查發現這個頁面由於不是靜態頁面是通過後臺數據返回的動態頁面所以在meta中新增不起作用。後面與後臺溝通讓他們加上在瀏覽器中可以看到如下圖:

第一次瀏覽網頁:

第二次訪問網頁(使用重新整理按鈕或者f5重新整理頁面)

快取新增成功。在5分鐘內再次訪問頁面資料會從客戶端快取中拿,不會再訪問後臺服務,加快了瀏覽器的訪問速度,提高了使用者體驗。

點選商品列表進入詳情頁點選返回按鈕回到上次開啟列表的位置

使用網頁的cookie值實現功能。將商品列表的scrollTop獲取到並且存入cookie中如下:

$('.serve-list').scroll(function(){
		$.cookie("gallery_scroll", $('.serve-list').scrollTop());
	})


然後編輯一個新的方法呼叫這個cookie值之後就可以使用 如下:
 $(function () {
		var str = parseInt($.cookie("gallery_scroll"));
		 if (str!='') {
			 $(".serve-list").animate({ scrollTop: str}, 1);
		}
	})


實現返回該頁面自動回到上次開啟的頁面

相關推薦

h5快取 商品列表進入詳情返回按鈕回到上次開啟列表位置

   最近幾天能研究了一下客戶端的快取以及cookie的用法。客戶端快取我個人選用一種就是在頭部新增cache-control:max-age=(時間)秒,首先是在html的meta標籤中新增但是在瀏覽器中檢視到沒有起作用,通過檢查發現這個頁面由於不是靜態頁面是通過後臺數

yii2開發筆記---h5上拉載入資料,進入詳情返回上次進入詳情位置

其他框架和原生都適用 html程式碼: <ul class="list"> <?php if(!empty($model)){foreach ($model as $key) { ?> <li class="line"

移動端列表某條記錄,進入詳情返回時定位在剛才位置

@[列表返回|minirefresh|cookie|sessionStorage] 背景     前不久做一個類似電商的h5專案,產品經理有個業務需求:使用者在商品列表,點選某一條商品的時

Python爬取亞馬遜商品列表-xpath(詳情爬取待更新...)

一.分析頁面結構 先行爬取首頁內容的兩個欄位,一個是商品名稱title以及價格price; 二.分析頁面的請求: 首先按照PC端的url進行請求,結果未得到返回響應的response的資料,於是通過chrom瀏覽器切換至手機端的來獲取響應: 觀察到其url

vue+elementUI管理後臺的列表進入詳情

後臺管理系統中經常要實現這樣一個事兒,點選列表頁的某一條,進入詳情頁,網上百度許久後,發現不能完全解決我的問題。在請教一位前端同學後,來總結下。 1,在列表頁中定義點選跳轉的方法: openDetail:function (row) { this.$router

仿抖音視訊詳情贊紅心動效

GitHub地址: https://github.com/selfconzrr/LikeAnimator 可直接測試執行 核心思路: 自定義 View 繼承自 RelativeLayout ,重寫 onTouchEvent,在點選時觸發將心形的圖片 add 到整個 vie

vue中 進入詳情記住滾動位置(keep-alive)

vue中 進入列表詳情計算滾動位置 > 有時業務提出這樣一個需求 就是從商品頁面進入到列表詳情頁 要儲存當前滾動的位置,這裡我就想到了keep-alive 首先在路由中引入需要的模組 { path: ‘/scrollDemo’,

微信 HTML5 實現列表詳情無重新整理返回 seesionStorage

最近在最微信端開發,遇到了一個比較有意思的問題。  1:商品分頁列表頁 2:商品詳情頁 需求:  實現當在第N頁的列表頁,點選ID=Num的商品詳情頁,跳轉到詳情頁後,再點選返回按鈕,依舊返回到列表第N頁,並顯式的改變ID=Num商品的檢視狀態 注:詳情頁與列表頁是兩個檢

仿淘寶上拉進入詳情互動的實現

來源:Wang66    連結:http://www.jianshu.com/p/876a9b8fd6ac 前言 專案某個新需求的互動要求仿照淘寶上拉從下網上彈出寶貝詳情。

微信小程式:商品+,出現數量-

問題描述: 商品列表中只有“+”,點選之後出現“-1+”,可以對數量進行增減, 效果 .wxml <view class="add-box">

微信小程式——商品分類跳轉到該商品商品詳情頁面(已實現)

        首先,我不得不感慨下,慕課網上“7七月”老師的課真的很強大,此處放連結https://coding.imooc.com/learn/list/75.html。        我只是學習到了一半就開

Android開發歡迎跳過倒計時進入主頁

頁面效果: 沒點選跳過自然進入主頁,點選跳過之後立即進入主頁HelloWorld   實現步驟: 1、歡迎頁佈局activity_sp.xml放一張背景圖(圖片隨你便啦)再放一個盛放倒計時的TextView。 1 <?xml version="1.0" encoding=

vue單應用中 返回列表記住上次滾動位置、keep-alive快取之後更新列表資料 那

實踐場景需求 產品列表中,滾動到一定位置的時候,點選檢視產品資訊,後退之後,需要回到原先的滾動位置,這是常見的需求 所有頁面均在router-view中,暫時使用了keep-alive來快取所有頁面,所以進入不同分類的產品列表,和不同的產品詳情頁面,需要更新資料 首先注意: 本次實踐測試環境為pc

Android 仿QQ退出(返回鍵不退出app,icon直接進入上次退出的頁面)

 在登入頁或者歡迎頁onCreate方法加入如下程式碼:   if((getIntent().getFlags() & Intent.FLAG_ACTIVITY_BROUGHT_TO_

解決:Android App 在執行時候按下 home 鍵,讓App 在後臺執行,圖示再次進入時防止應用重新啟動

一:app 退出時,讓 app 在後臺執行,類似於 home 鍵的功能,最小化 重寫 onkeydown 和 onBackPressed 方法,主要是 movetoBack 方法。 注意在 MainA

安卓實現類似連續5次進入開發者模式的功能

我們在專案開發中,為了方便測試,我們往往會碰到需要切換正式環境和測試環境的功能。今天,我就分享一下我專案中用到的切換方式。 我們採用一秒內連續點選某個5次,就會開放出切換環境的按鈕。下面附上程式碼和說明。 // 需要點選幾次 就設定幾 long [] mHit

H5實現多圖片預覽上傳,可可拖拽控制元件介紹

在做圖片上傳時發現一個蠻好用的控制元件,支援多張圖片同時上傳,可以點選選擇圖片,也可以將圖片拖拽到上傳框直接上傳,方便,好用,介面也簡單,基本可以直接放到專案裡使用。 先看看他的樣式: 選擇圖片後

關於Android App上線後從應用市場開啟按鈕進入應用後進行操作後,再home鍵到桌面後擊啟動圖示重新開啟應用的解決方法

如題所述,重新開啟應用夠噁心的了,讓人更噁心的是點選返回鍵退出後,上次點選home鍵之前的那個介面又跳出來,讓人哭笑不得,經過搜尋找到解決辦法,最後記錄在此 在應用啟動的第一個介面的onCreate方法的super.onCreate(savedInstanceState);之後呼叫下面方法

移動Web前端,遊客商品的收藏按鈕,登入完成,回來之後,如何自動收藏

我們都知道,移動Web端(M站環境下),很多時候,前端是無法判斷使用者的登入狀態的,因為出於安全性考慮,與賬號相關的cookie欄位一般都是 http-only的。 如果前端想判斷使用者的登入狀態,需要主動去調後臺介面,根據後臺介面返回的狀態碼來判斷。 那麼,我如果想實現下面這樣一個場景,該怎麼做呢? 移動

舉例說明ArrayAdapter的使用如何設定ListView中每個Item的事件

首先要先定義一個ListView物件,並進行例項化private ListView mListView; mListView=(ListView)findViewById(R.id.ListView);定義類MyAdapter繼承ArrayAdapterpublic cla