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>