1. 程式人生 > >vue頁面出去時vux存頁面高度,再進來時回到原來高度

vue頁面出去時vux存頁面高度,再進來時回到原來高度

        //html檔案
created(){


},
beforeRouteLeave(to, from, next) { //從這個頁面出去的時候執行這裡
    try {
      let top = document.documentElement.scrollTop || document.body.scrollTop; // 得到當前高
      let scrolldata = {
        url: "/Pushtwopage", //記錄哪個頁面
        scrollTop: top, //記錄滾動條高度
        shop: this.shop,
        shopTypeName: this.shopTypeName,
      };
      this.$store.commit("set_scrollPostions", scrolldata); //把要存的存到set_scrollPostions裡
    } catch (err) {}
    next();
},
mounted() {
var url = window.location.pathname; //獲取一下頁面url的後面一截
    url = "/Pushtwopage";
    var scrolls = this.$store.state.scrollPostions; //把vux存的資料拿出來
    var scrollTop = 0;
    this.shop.data = [];
    for (let i = 0; i < scrolls.length; i++) {
      if (scrolls[i].url == url) {
        scrollTop = scrolls[i].scrollTop;
        this.shop = scrolls[i].shop;
        this.shopTypeName = scrolls[i].shopTypeName;
        break;
      }
    }
    setTimeout(function() {
      scroll(0, scrollTop);
    }, 10);


},




//store.js檔案
import Vue from 'vue'
import Vuex from 'vuex'
import Qs from 'qs'


Vue.use(Vuex)


const state = {
    user:{},
    token:'',
    addrdata:[],
    scrollPostions:[],
    triplist:[],
    catchMap:new Map(),
}


const mutations = {
  set_user (state, user) {
    state.user = user
  },
  set_token (state, token) {
    state.token = token
  },
  set_addrdata(state,data){
    state.addrdata=data
  },
  set_tripList(state,data){
    state.triplist=data
  },
  set_scrollPostions (state, currscrollPostion) {
    for(let i=0;i<state.scrollPostions.length;i++){
        if(state.scrollPostions[i].url==currscrollPostion.url){
          state.scrollPostions[i]=currscrollPostion;
          return;
        }
    }
    state.scrollPostions.push(currscrollPostion);
  }
}


export default new Vuex.Store({
  state,
  mutations
})

相關推薦

vue頁面出去vux頁面高度,進來回到原來高度

        //html檔案created(){},beforeRouteLeave(to, from, next) { //從這個頁面出去的時候執行這裡    try {      let top = document.documentElement.scrollTop

【C語言】球落地又反彈原來高度一半問題。

【C語言】一個球從100米高處自由落下,每次落地後反跳回原高度的一半,再落下,再反彈。求第10次落地時,共經過多少米?第10次反彈多高? #include <stdio.h> int main () { double h = 100.0;

vue 使用localStorage保頁面變量到瀏覽器變量中

() vuejs win color bsp .get urn str ejs const STORAGE_KEY = ‘todos-vuejs‘//定義常量保存鍵值 export default{ fetch(){ return JSON.parse

三、vue如何配置路由 、獲取路由的參數、部分刷新頁面、緩頁面

component 有一個 數據 main -a his 如何配置 自動 收件人 1、路由配置:所有的啟動文件都在最初始的main.js文件裏面,這個文件中首先需要引入: 2、路由文件配置說明: 3、如何獲取頁面url的參數? this.$route.quer

完美解決vue專案中彈出框滑動,內部頁面也跟著滑動問題

在main.js中設定全域性函式: //彈出框禁止滑動 Vue.prototype.noScroll = function () {   var mo = function (e) {&

Vue路由傳參,重新整理頁面,引數將當成字串來處理?

在練習程式設計路由導航傳參時,發現將 num:10傳到積分頁面通過computed屬性加1變成11,但重新整理了本頁後並未按照預想的那樣, 變為11,而是字串拼接成了101, 然後,typeof檢視傳過去的Num型別 console.

vue防止閃爍(當網速慢,訪問頁面出現花括號)

angular防止閃爍:v-cloak,一般用在大段落 vue防止閃爍:v-text <span>{{msg}}</span> ->   雙括號用v-text防止閃爍,

前端框架Vue.js的使用及具體頁面跳轉的引數傳遞

由於專案急且前端開發人員只會拼頁面具體資料互動不會,只能我後臺開發人員來寫。因為是資料互動使用的是ajax方式,我首先要面臨的問題是我獲得的資料怎麼顯示在頁面上,以及怎麼把資料儲存下來,等頁面跳轉時就不用向後臺再次請求資料,比如使用者名稱以帳號相關基礎資訊,不可能每次開啟新

分配粒度和內頁面大小(x86處理器平臺的分配粒度是64K,內頁是4K,所以section都是0x1000對齊,硬盤扇區大小是512字節,所以PE文件默認文件對齊是0x200)

tail details lpad 硬件 512字節 地址 系統 pad 原因 分配粒度和內存頁面大小x86處理器平臺的分配粒度是64K,32位CPU的內存頁面大小是4K,64位是8K,保留內存地址空間總是要和分配粒度對齊。一個分配粒度裏包含16個內存頁面。這是個概念,具體

Vue下路由History mode導致頁面無法渲染的原因

tle 使用 history pro 階段 cond 引用 attribute 錯誤 用 Vue.js + vue-router 創建單頁應用,是非常簡單的。使用 Vue.js ,我們已經可以通過組合組件來組成應用程序,當你要把 vue-router 添加進來,我們需要做的

vue點擊tab跳轉頁面,給點擊的tab添加樣式,且解決刷新以後點擊的tab樣式消失問題

解決 clas col 跳轉頁面 turn body outer cti 問題 <ul class="nij"> <li v-for="item in nav" @click="selectNav(item.title)">

Android中Activity被系統會收前頁面信息保

prot 判斷 edi 1.5 protected 是否為空 信息保存 android and 1、重寫onSaveInstanceState方法 protected void onSaveInstanceState(Bundle outState) { super

python---redis緩頁面前戲之剖析render源碼

http addition war ads include 參數 sca calling face 1.初始代碼: def get(self, *args, **kwargs): import time tm = time.time() self.

服務端控制各種瀏覽器禁止緩頁面資源 學習筆記

服務端控制各種瀏覽器禁止緩存頁面資源 import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.Http

layer ui使用多層彈框,各個頁面交互問題

layer ui最近在用layer ui的彈框做項目,使用的時候有時會用到2-3級的彈框,多級彈框會遇到每個彈框的數據之間的交互問題,例如: 圖中有兩個彈框父級彈框編輯用戶,子級彈框角色分配,我所選中的復選框,需要在父級彈框裏顯示出來那我父級頁面的彈框的代碼可以這樣寫$(‘.user-add‘).on(&qu

vue中數組刪除,頁面沒重新渲染

渲染 數據 rip this dex span urn fault script 創建一個組件時,數據類型是數組,在刪除這個數組中的數據時,數組中的數據是對的,但頁面渲染的數據卻不對。 舉例:(不一定復現) <ul> <li v-for=

靜態頁面清除瀏覽器緩

val 解決 time() 最新 導致 bpa rand oms 參數   在做官網開發中出現靜態頁之後,即使發布了新的版本之後,還是會讀取瀏覽器緩存,導致頁面不是最新頁面。   解決措施:   1、meta方法:   <meta htpp-equiv="pragma

關於瀏覽器退默認行為的研究 退保頁面狀態

回退 記錄 了解 結果 翻頁 沒有 tor cal als 緣起:最近在研究 移動端的頁面研發工作,由於之前從來沒有專業開發過移動端頁面,所以在開發過程中,可以說是處處有精彩,處處有收獲.最讓我意外的是,瀏覽器頁面回退問題 就是個頭疼的問題. 需求:我們的需求是,在a頁面,

vue part3.3 ajax (axios) 及頁面異步顯示

scrip res posit 3.3 epon nbsp error part resp App.vue <template> <div> <div v-if="!repoName">loading&l

C# Winform 加載窗體/對象的等待頁面設計

div lee lis 加速 task winform cat form override 在設計應用程序過程中,有時候加載對象需時較長,我們可以顯示一個Loading等待頁面,對用戶來說就比較友好了。 這個還是涉及到多線程,下面是步驟。 一、創建好Loading窗體: