vue吸顶和平滑效果及其他问题记录

一、导航条吸顶效果

需求：官网内部有个水平导航条，当向下滑动到导航条置顶时需要固定在顶部。
实现方法：

二、平滑效果

需求：在切换导航tab时需要将页面平滑置顶到初始位置。
实现方法：
（1）滚动容器或者滚动的父容器设置固定高度

// 这里是外层滚轮父容器或者滚动容器自身的指定高度
height: calc(100vh - 50px); 
overflow: auto;  // 若是设定父容器高度，则滚动属性设置到要滚动的容器上

（2）设置滚动容器的scrollTo方法

// 切换tab
   handleTab (index) {
     this.currentIndex = index
     window.scrollTo({
       top: 0,
       behavior: 'smooth'
     })
   },

• scrollTo有两种语法：

// 1.scrollTo(x,y)   //指定滚动到x轴和y轴的位置
// 2.scrollTo(options)  //options有三个参数，（left,top,behavior ）,
// top 等同于  y-coord
// left 等同于  x-coord
// behavior  类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
  window.scrollTo({
       top: 0,
       behavior: "smooth"
  });

三、去掉vue路由地址中的#/以及重定向

需求：去掉vue路由地址中的#/,问题是部署之后页面无法显示
实现方法：利用路由重定向

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

import Index from '@/views/index.vue'

Vue.use(Router)

export default new Router({
 base: '/conferenceportal',    // 设置base属性
 mode: 'history',      // 去掉#号
 routes: [
   {
     path: '/',
     name: 'index',
     component: Index
   }
 ]
})

// App.vue