• vue router滚动行为scrollBehavior


    views/cityDetail.vue:

    <template>
      <div class="city-detail">{{$route.params.id}}</div>
    </template>
    <style>
    .city-detail{
      height: 1500px;
      line-height: 500px;
      background-color: greenyellow;
      font-size: 100px;
      text-align: center;
    }
    </style>

    App.vue:

    <template>
      <div id="app">
        <div class="sticky-header">头部导航栏(粘性布局)</div>
        <div class="box">vue router中的滚动行为</div>
        <div class="hot-cities">
          <h1>热门城市</h1>
          <div class="nav" id='nav'>
            <!-- <router-link tag='div' class="nav-link" active-class="active" :to="{path:'/cityDetail/1',hash:'#nav'}">城市1</router-link>
            <router-link tag='div' class="nav-link" active-class="active" :to="{path:'/cityDetail/2',hash:'#nav'}">城市2</router-link>
            <router-link tag='div' class="nav-link" active-class="active" :to="{path:'/cityDetail/3',hash:'#nav'}">城市3</router-link> -->
            <div v-for="(item,index) in cityList" :key="index" :class="['nav-link',{active:currentIndex===index}]" @click="handlePush(index)">{{item}}</div>
          </div>
        </div>
        <router-view></router-view>
      </div>
    </template>
    <script>
    export default {
      data() {
        return { cityList: ['城市1', '城市2', '城市3'], currentIndex: 0 }
      },
      methods: {
        handlePush(index) {
          this.currentIndex = index
          this.$router.push({ path: '/cityDetail/' + (index + 1), hash: '#nav' })
        }
      }
    }
    </script>
    <style lang="less" scoped>
    .sticky-header {
      position: sticky;
      top: 0;
      width: 100%;
      line-height: 44px;
      background-color: blue;
      color: #fff;
      text-align: center;
      z-index: 1;
    }
    .box {
      width: 100%;
      line-height: 700px;
      background-color: orange;
      color: #fff;
      font-size: 100px;
      text-align: center;
    }
    .hot-cities {
      text-align: center;
      > h1 {
        padding: 20px 0;
      }
      .nav {
        display: flex;
        border-top: 1px solid #000;
        .nav-link {
          display: flex;
          height: 50px;
          flex: 1 1 33.33%;
          justify-content: center;
          align-items: center;
        }
        .active {
          color: greenyellow;
          background-color: #000;
        }
      }
    }
    </style>

    router/index.js:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    import CityDetail from '@/views/CityDetail'
    const routes = [
      {
        path: '/cityDetail/:id',
        name: 'cityDetail',
        component: CityDetail
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      routes,
      scrollBehavior(to, from, savedPosition) {
        console.log(to, from, savedPosition)
        if (savedPosition) {
          return savedPosition // 浏览器上的前进后退按钮记录的位置对象
        } else {
          const position = {}
          position.selector = to.hash
          if (to.hash === '#nav') position.offset = { y: 150 }
          return position
        }
      }
    })
    
    export default router

    效果:

    当切换tab时自动定位到指定高度

  • 相关阅读:
    一个不错的时间日期控件My97DatePicker
    实现dropDownList listBox联动
    删除字符串最后一个字符的几种方法
    Visual Studio 2008 Express 中文版下载
    DotNet上传大文件
    asp.net下获取Excel所有的工作表名称
    无法访问http,会强制跳到https
    循环
    P7516[省选联考2021A/B卷]图函数【bfs】
    AT2371[AGC013E]Placing Squares【矩阵乘法】
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15110513.html
Copyright © 2020-2023  润新知