vue返回记住滚动条位置

喜欢ヅ旅行 2022-01-27 17:37 434阅读 0赞

assets/js/common.js

export const Storage = {
        
        set: function (key, data) {
        
          return window.localStorage.setItem(key, JSON.stringify(data))
        },
        get: function (key) {
        
          return JSON.parse(window.localStorage.getItem(key))
        },
        remove: function (key) {
        
          return window.localStorage.removeItem(key)
        },
        setSession: function (key, data) {
        
          return window.sessionStorage.setItem(key, JSON.stringify(data))
        },
        getSession: function (key) {
        
          return JSON.parse(window.sessionStorage.getItem(key))
        },
        removeSession: function (key) {
        
          return window.sessionStorage.removeItem(key)
        },
        clear: function () {
        
          sessionStorage.clear()
          localStorage.clear()
        }
      }

main.js引入

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    import {
         Storage } from './assets/js/common'
    
    // 绑定vue原型链
    Vue.prototype.Storage = Storage
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
        
      el: '#app',
      router,
      components: {
         App },
      template: '<App/>'
    })

index.vue

<template>
      <div id="index">
        <div class="hot">
          <div class="hot-text">热门</div>
          <div class="hotBar">
            <div class="hot_item">
              <div class="hot-item-content" @click="toHotPage('/next')">
                <div><img src="../../../static/img/icon_1@2x.png" alt=""></div>
                <p>1111</p>
              </div>
              <div class="hot-item-content" @click="toHotPage">
                <div><img src="../../../static/img/icon_2@2x.png" alt=""></div>
                <p>2222</p>
              </div>
    
              <div class="hot-item-content" @click="toHotPage">
                <div><img src="../../../static/img/hotbaricon@(6).png" alt=""></div>
                <p>3333</p>
              </div>
    
              <div class="hot-item-content" @click="toHotPage">
                <div><img src="../../../static/img/hotbaricon@(1).png" alt=""></div>
                <p>4444</p>
              </div>
              <div class="hot-item-content" @click="toHotPage">
                <div><img src="../../../static/img/hotbaricon@(5).png" alt=""></div>
                <p>5555</p>
              </div>
    
              <div class="hot-item-content" @click="toHotPage">
                <div><img src="../../../static/img/hotbaricon@(3).png" alt=""></div>
                <p>6666</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
        
      data () {
        
        return {
        
        }
      },
      methods: {
        
        toHotPage (el, val) {
        
          let left = el.currentTarget.parentElement.parentElement.scrollLeft
          this.Storage.removeSession('hotScroll')
          this.Storage.setSession('hotScroll', left)
    
    		this.$router.push({
        path: val})
         
        },
      },
      mounted () {
        
    
        if (this.Storage.getSession('scrollX')) {
        
          let div = document.getElementsByClassName('navbar')[0]
          div.scrollLeft = this.Storage.getSession('scrollX')
        }
    
        if (this.Storage.getSession('hotScroll')) {
        
          let div = document.getElementsByClassName('hotBar')[0]
          div.scrollLeft = this.Storage.getSession('hotScroll')
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    @import "../../assets/css/base.less";
    #index {
        
      background-color: #f5f5f5;
    
      
    
      .hot {
        
        width: 7.5rem;
        height: auto;
        background-color: #fff;
        margin-top: .3rem;
    
        .hot-text {
        
          text-align: left;
          padding: .3rem;
          font-size:.40rem;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(51,51,51,1);
          border-bottom: .01rem solid #E6E6E6;
        }
        .hotBar {
        
          padding: .3rem;
          overflow-x: scroll;
    
          .hot_item {
        
            display: inline-flex;
    
            .hot-item-content {
        
              padding-right: .8rem;
              width: auto;
              height: auto;
    
              img {
        
                width: .9rem;
                height: .9rem;
                margin-bottom: .16rem;
              }
              p {
        
                font-size:.28rem;
                font-family:PingFang-SC-Regular;
                font-weight:400;
                color:rgba(51,51,51,1);
                white-space:nowrap; 
              }
            }
            .hot-item-content:last-child {
        
              padding-right: 0;
            }
          }
        }
      }
    }
    </style>