vue常见问题汇总（二）

---

一、路由跳转不在顶端

方法一

export default new Router({
//加入下列代码
  scrollBehavior(to,from,saveTop){
    if(saveTop){
      return saveTop;
    }else{
      return {x:0,y:0}
    }
  }

更新：vue-router已不再支持此方法，更换以下：

页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。
页面没有DTD，即没指定DOCTYPE时，使用document.body。

router.afterEach((to, from) => {
  let bodySrcollTop = document.body.scrollTop
  if (bodySrcollTop !== 0) {
    document.body.scrollTop = 0
    return
  }
  let docSrcollTop = document.documentElement.scrollTop
  if (docSrcollTop !== 0) {
    document.documentElement.scrollTop = 0
  }
})

方法二

main.js

router.beforeEach((to, from, next) => {    
    // chrome
    document.body.scrollTop = 0
    // firefox
    document.documentElement.scrollTop = 0
    // safari
    window.pageYOffset = 0
    next()
})
//每次点击分页的时候，页面也会停留在之前浏览的位置，在调完接口后也加入下面几行代码就好了。
// chromedocument.body.scrollTop = 0
// firefoxdocument.documentElement.scrollTop = 0
// safariwindow.pageYOffset = 0

二、判断用移动端和浏览器

var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsIphone = sUserAgent.match(/iphone/i) == "iphone";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (
bIsIpad ||
bIsIphoneOs ||
bIsIphone ||
bIsMidp ||
bIsUc7 ||
bIsUc ||
bIsAndroid ||
bIsCE ||
bIsWM
) {
	console.log('h5');
	require("./assets/style/h5.less");
	this.$store.dispatch("ish5");
} else {
	console.log('web');
	require("./assets/style/web.less");
	this.$store.dispatch("isweb");
}

三、平滑定位到锚点

首先添加d_jump的class作为锚点

<div class="holidayList scroll_content">
	<ul>
		<li v-for="(v,i) in imgList" :key="i.id" :id="'loc'+i" class="d_jump">
			<img class="imgLogo" :src="v.logo" alt>
		</li>
	</ul>
</div>

然后定义操作锚点的方法jump(index)

<ul>
	<li @click="jump(0)">xxx1</li>
	<li @click="jump(1)">xxx2</li>
	<li @click="jump(2)">xxx3</li>
	<li @click="jump(3)">xxx4</li>
</ul>

method:

jump(index) {
    // 用 class="d_jump" 添加锚点
    let jump = document.querySelectorAll(".d_jump");
    let total = jump[index].offsetTop;
    let distance =
        document.documentElement.scrollTop || document.body.scrollTop;
    // 平滑滚动，时长500ms，每10ms一跳，共50跳
    let step = total / 50;
    if (total > distance) {
        smoothDown();
    } else {
        let newTotal = distance - total;
        step = newTotal / 50;
        smoothUp();
    }

    function smoothDown() {
        if (distance < total) {
            distance += step;
            document.body.scrollTop = distance;
            document.documentElement.scrollTop = distance;
            setTimeout(smoothDown, 10);
        } else {
            document.body.scrollTop = total;
            document.documentElement.scrollTop = total;
        }
    }

    function smoothUp() {
        if (distance > total) {
            distance -= step;
            document.body.scrollTop = distance;
            document.documentElement.scrollTop = distance;
            setTimeout(smoothUp, 10);
        } else {
            document.body.scrollTop = total;
            document.documentElement.scrollTop = total;
        }
    }
}

四、刷新浏览器丢失vuex里store信息

APP.vue里监听的所有页面的刷新, 直接加入以下代码

//刷新前存储store
created() {
    if (sessionStorage.getItem("store")) { //页面加载前读取sessionStorage里的状态信息
        this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
    }
    window.addEventListener("beforeunload", () => { //在页面刷新前将vuex里的信息保存到sessionStorage里
        sessionStorage.setItem("store", JSON.stringify(this.$store.state))
    })
},