vue 滑动置顶功能

置顶功能"/>

vue 滑动置顶功能

我的移动web项目,页面第一次加载正常在内容重新从顶部渲染,但是当滑动到底部,点击底部的数据,跳转后,跳转后页面的定位和上一页的定位一致,不是在顶部的,在电脑和部分机型是正常的,但是在华为,vivo,和部分苹果机上就出现上述问题了

我在router中添加

scrollBehavior(to, from, savedPosition) {

return {

x: 0,

y: 0

}

}

和

router.afterEach((to, from, next) => {

Vue.nextTick(() => {

document.body.scrollTop = 0

document.documentElement.scrollTop = 0;

window.scrollTo(0, 0)

})

})

代码部分

路由

import Vue from 'vue'

import Router from 'vue-router'

import store from "@/store/index.js"

Vue.use(Router)

const router = new Router({

routes: navRouters,

scrollBehavior(to, from, savedPosition) {

return {

x: 0,

y: 0

}

}

})

//不存在返回按钮路由

let whiteList = ['home', 'contact', 'brand', 'member', "declarehair_index", "furnishing_index"]

//监听路由

router.beforeEach((to, from, next) => {

if (whiteList.indexOf(to.name) > -1) {

storemit('setshowBack', false)

} else {

storemit('setshowBack', true)

}

storemit("setIsLocation", false);

next()

})

router.afterEach((to, from, next) => {

window.pageYOffset = 0

window.scrollTo(0, 0)

document.body.scrollTop = 0

document.documentElement.scrollTop = 0;

})

export default router

layout布局页面

import syHeader from "@/page/public/header";

export default {

name: "layout",

components: { syHeader },

activated() {

document.getElementById("layout").scrollTop = 0;

},

methods: {

CB_Header(val) {

if (val) {

document.body.style.overflow = "hidden";

} else {

document.body.style.overflow = "auto";

}

},

preventDefaultFn(event) {

event.preventDefault();

}

}

};

#layout {

margin: 0;

padding: 0;

// overflow: scroll;

}

底部footer页面

• 联系我们
• 品牌招聘
• 会员招募
• 招商申请

pierre cardin Home.版权所有 Copyright ©皮尔卡丹

沪ICP备18041453号

export default {

name: "sy-footer",

data() {

return {};

},

methods: {

handleClick(type) {

let url = "";

switch (type) {

case "contact":

url = "contact";

break;

case "brand":

url = "brand";

break;

case "member":

url = "member";

break;

}

if (this.$route.name == url) return;

this.$router.push({

name: url

});

}

}

};

.sy-footer {

width: 100%;

background-color: #687378;

ul {

margin: 0;

padding: 0;

width: 100%;

li {

padding: 0 5px;

width: 100%;

list-style: none;

color: #fbf8f1;

font-size: 0.85rem;

line-height: 3.7rem;

}

.li-border-bottom {

border-bottom: 1px solid #535d63;

}

}

.copy-footer {

font-size: 0.2rem;

border-top: 1px solid #535d63;

color: #c5cace;

line-height: 56px;

}

}

子页面

品牌招聘

pierre cardin home 的每一位员工深受 Pierre Cardin

关于生活哲理学的浸润，大胆创新、思维活跃、热爱生活。也为每一位有能力的人才的卓越表现和蓬勃发展提供了独一无二的环境氛围。加入 pierre cardin

Home，与我们一同分享你在生活与工作上的不同体验，一同为每一个人的美好家居生活，进行锐意的探索与实践。

查看职位

我们感恩员工们的付出，同时将品牌资源分享给所有的员工们。在品牌商学院中，将会有来自设计、艺术、时尚等各个不同领域的佼佼者以讲座、线上授课等形式为员工创造更多的学习机会，不断丰富自身创造力。

工作空间

办公空间品牌总部大楼位于中国上海，这座建筑前身曾为一座专业的医疗研究所并超过 70

年的历史。我们已尊重过去、现在与将来的态度希望大楼将大楼打造成与周边社群可以和谐相处的存在。我们保留了大楼本身身处年代特有的水磨石地面；保留曾经的预制板天花并用颜色加以覆盖；创造性地将钢结构新楼与历史老楼以玻璃框架分离开来并将“老与新”的概念在公司的职能分布上进行结合。而这也是皮尔·卡丹家具的品牌重塑的重要象征之一。

企业文化

作为一个以重塑 70

年代的纯正法国血统品牌为目的的企业，我们将创造力作为每个企业成员赖以生存的工作能力。追溯品牌的根源并完美地加入年轻化复兴的语言是品牌在当下飞速发展的时代里重回舞台的方式。每位员工将永远被激励去不断地提升从认知、系统、方法层面来完善个人与团队的创造力。

常见问题

我们鼓励您阅读 pierre cardin Home 招聘流程详细介绍，以便在申请中获取足够的信心。 Pierre Cardin 的招聘流程是怎么样的？ 根据职位不同，我们的招聘和聘用流程可能有所差异。不过，在线提交申请后，会有人力资源部门的工作人员审核申请。他们如果认为您适合该职位，便会安排电话面试，在某些情况下会采用视频面试。您可以藉此机会进一步介绍自己的技能、性格以及为何适合该职位。对于某些职位，我们要求候选任人参加某种形式的评估，然后进行背景和证明材料调查，最后提供工作机会 Q & 我如何申请 pierre cardin Home 的职位？ 请在上方页面点击查看职位，在线上提示的流程下进行职位了解与职位申请。 Q & pierre cardin Home 看重候选人的哪些方面？ 良好的品行是作为一切开始的先决条件。其次是良好的思维方式与个人创造力 在线填写申请时，需回答关于您自己的若干问题，并提交简历。如果您希望提交更多信息，可在申请时上传相关资料。如果您申请的是创意、市场营销、数字化或设计团队的职位，请务必提供您的作品集。

为合作伙伴创造更大的价值！

查看职位

'I have a name,
I have to take advantage of it'

import syFooter from "@/page/public/footer";

export default {

name: "contact",

data() {

return {};

},

components: { syFooter },

methods: {

handleMore() {

}

}

};

.sy-page {

background-color: #faf8ef;

.sy-contacts {

width: 100%;

line-height: 40px;

padding: 0 10px;

.sy-context {

text-align: left;

font-size: 1.2rem;

font-weight: 700;

padding-top: 25px;

margin-bottom: 0.1rem;

color: black;

}

.sy-title {

font-size: 14px;

color: #697279;

margin-bottom: 8px;

}

.sy-content {

padding-top: 0px;

color: #697279;

line-height: 20px;

font-size: 11px;

padding-bottom: 16px;

}

}

.sy-contents {

padding: 0 10px;

color: black;

font-size: 13px;

font-weight: 700;

line-height: 23px;

padding-bottom: 16px;

border-bottom: 1px solid #dbd8cf;

}

.sy-question {

margin-top: 0;

font-size: 1.1rem;

color: black;

border-bottom: 1px solid #dbd8cf;

}

.sy-titles {

font-weight: 700;

color: black;

font-size: 11px;

line-height: 23px;

padding-bottom: 16px;

}

.sy-cont {

padding-bottom: 30px !important;

border-bottom: 1px solid #dbd8cf;

}

h4 {

margin: 1.8rem 0;

}

.sy-more {

width: 100%;

margin: 0.8rem 0;

.sy-button {

margin: auto;

width: 98%;

line-height: 23px;

font-size: 0.85rem;

color: #8e8e8e;

text-align: center;

padding: 0.7rem 1.2rem 0.7rem 1.2rem;

border: 0.02rem solid #eaeaea;

}

}

}

.sy-img {

background-color: #faf8ef;

display: flex;

flex-flow: row wrap;

align-items: center;

padding: 0;

margin: 0;

li {

list-style: none;

flex: 0 0 50%;

img {

width: 100%;

padding: 0 0.15rem;

}

}

}

.sy-cooperation {

color: black;

}

.sy-footers {

line-height: 1.6rem;

padding: 1.8rem 0;

font-weight: 700;

}

在电脑和部分机型是正常的,但是在华为,vivo,和部分苹果机上就不行了,请教各位办法啊