vue实现京东动态楼层效果

页面效果如下

<template>
    <div>
        <h1>首页</h1>
        <section class="floor-nav" id="floorNavList">
          <!-- 左侧楼层 -->
            <ul class="nav-list">
                <li class="nav-list-item" v-for="(item, index) in floorNav" :key="item.id" @click="setFloorNavMountClick(index)">{{ item.name }}</li>
            </ul>
        </section>
        <!-- 右侧的内容区域 -->
        <section class="floor-item" v-for="item in floorList" :key="item.id">
            <div class="floor-item-box">
                <h2>{{ item.name }}</h2>
            </div>
        </section>
    </div>
</template>

<script>
    var TIMER = null
export default {
      name: 'home',
      data() {
        return {
          floorNav: [ // 自定义左侧楼层数
            { id: 1, name: 'F1' },
            { id: 2, name: 'F2' },
            { id: 3, name: 'F3' },
            { id: 4, name: 'F4' },
            { id: 5, name: 'F5' },
            { id: 6, name: 'F6' }
          ],
          floorList: [// 自定义右侧的楼层内容区域
            { id: 1, name: 'F1' },
            { id: 2, name: 'F2' },
            { id: 3, name: 'F3' },
            { id: 4, name: 'F4' },
            { id: 5, name: 'F5' },
            { id: 6, name: 'F6' }
          ],
          floorIndex: 1
        }
      },
      methods: {
        /**
             * 设置楼层导航事件驱动方法
             * @params Number index  楼层下标
             */
        // 点击楼层事件
        setFloorNavMountClick(index) {
          console.log('index....', index)
          var _this = this
          let floor_item = document.getElementsByClassName('floor-item'),
            floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop,
            window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
            timer = {
              step: 50,
              times: 20,
              FLOOR_OFFSETTOP: floor_offsetTop
            }
          console.log('floor_offsetTop', floor_offsetTop)
          console.log({ index, offsetTop: timer.FLOOR_OFFSETTOP })

          if (window_scrollTop > floor_offsetTop) {
            _this.setFloorScrollArrowUp(timer)
          } else if (window_scrollTop == floor_offsetTop) {
            return false
          } else {
            _this.setFloorScrollArrowDown(timer)
          }
          console.log('floor_item', floor_item)
          console.log('window_scrollTop', window_scrollTop)
          console.log('floor_offsetTop', floor_offsetTop)
        },
        /**
             * 设置楼层向上滚动
             * @params Object timer 定时器配置
             */
        setFloorScrollArrowUp(timer) {
          var _this = this
          clearInterval(TIMER)
          TIMER = setInterval(() => {
            const window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (window_scrollTop <= timer.FLOOR_OFFSETTOP) {
              document.documentElement.scrollTop = timer.FLOOR_OFFSETTOP
              document.body.scrollTop = timer.FLOOR_OFFSETTOP
              clearInterval(TIMER)
            } else {
              document.documentElement.scrollTop = window_scrollTop - timer.step
              document.body.scrollTop = window_scrollTop - timer.step
            }
          }, timer.times)
        },
        /**
             * 设置楼层向下滚动
             * @params Object timer 定时器配置
             */
        setFloorScrollArrowDown(timer) {
          var _this = this
          clearInterval(TIMER)
          TIMER = setInterval(() => {
            const window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (window_scrollTop >= timer.FLOOR_OFFSETTOP) {
              document.documentElement.scrollTop = timer.FLOOR_OFFSETTOP
              document.body.scrollTop = timer.FLOOR_OFFSETTOP
              clearInterval(TIMER)
            } else {
              document.documentElement.scrollTop = window_scrollTop + timer.step
              document.body.scrollTop = window_scrollTop - timer.step
            }
          }, timer.times)
        },
        /**
         * 监听窗口滚动楼层导航动态定位
         */
        floorSrcollAddEventListener() {
          var _this = this
          let nav_item = document.getElementById('floorNavList').getElementsByClassName('nav-list-item'),
            floor_item = document.getElementsByClassName('floor-item')
          nav_item[0].className = 'nav-list-item active'
          window.onscroll = function() {
            const window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            for (let i = 0, len = floor_item.length; i < len; i++) {
              const floor_offsetTop = floor_item[i].offsetTop - floor_item[0].offsetTop
              if (window_scrollTop >= floor_offsetTop) {
                for (let n = 0, len = nav_item.length; n < len; n++) {
                  nav_item[n].className = 'nav-list-item ' + (i === n ? 'active' : '')
                }
              }
            }
          }
    },
        /**
             * 页面初始化
             */
        initPage() {
          var _this = this
          _this.floorSrcollAddEventListener()
        }
      },
      mounted() {
        this.initPage()
  }
    }
</script>

<style scoped>
h1 {
    text-align: center;
}
.setaxios {
    width: 1000px;
    margin: 20px auto;
    text-align: right;
}
.setaxios input[type=button] {
    text-align: center;
}
.floor-nav {
    position: fixed;
    top: 200px;
    /* left: 50px; */
    left:350px;
}
.floor-nav .nav-list {
    width: 48px;
    display: inline-block;
    text-align: center;
    background-color: #f8f8f8;
    padding: 5px 15px;
    /* background-color: red; */
}
.floor-nav .nav-list .nav-list-item {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 48px;
    vertical-align: middle;
    align-self: center;
    border-bottom: 1px solid #fff;
    cursor: pointer;
}
.floor-nav .nav-list .nav-list-item.active,
.floor-nav .nav-list .nav-list-item:hover {
    color: #FFF;
    background-color: #404040;
    /* color: red; */
}

.floor-item {
    width: 1000px;
    margin: 60px auto;
    min-height: 300px;
    text-align: center;
    color: #FFF;
    background-color: #404040;
}

</style>

直接在页面引用即可
本文学习自:https://www.twblogs.net/a/5bfadb1fbd9eee7aec4dc8ab/zh-cn

原文地址:https://www.cnblogs.com/smart-girl/p/11684124.html

时间: 2024-08-06 05:45:08

vue实现京东动态楼层效果的相关文章

扒皮下京东首页楼层图标的动画效果实现方式

京东首页的楼层图标默认是灰色的,但拉动滚动条,让该图标从下方挪动到屏幕正中的时候,该图标会显示出从上到下由灰变绿的动画效果,如下图 这种效果很有Lazyload的范,也是挺吸引眼球的交互方式,下面用JQ来仿造下这种效果的实现方式,其实挺简单. 首先我是做了2个gif分别作为图标的默认状态和动画状态(注意第二个gif的动画效果只显示一次,不循环的,而且是从下往上<做的着急了点,跟京东的动画方向相反了哈哈>,错过效果的朋友请刷新吧):        P.S. 京东的动画效果并非用动态gif实现的,

jQuery楼层效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery楼层效果</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script

css3实现的动态月食效果代码实例

css3实现的动态月食效果代码实例:本章节分享一段代码实例,它利用CSS3实现了动态的月食效果.动画其实比较简单简短,需要的朋友可以自行做一下分析,这里就不多介绍了.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

Android用TabLayout实现类似网易选项卡动态滑动效果

此前我们用HorizontalScrollView也实现了类似网易选项卡动态滑动效果,详见 Android选项卡动态滑动效果这篇文章 这里我们用TabLayout来实现这一效果.TabLayout是Android Design Support Library库中的控件. Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给

在WPF中使用PlaneProjection模拟动态3D效果

原文:在WPF中使用PlaneProjection模拟动态3D效果 虽然在WPF中也集成了3D呈现的功能,在简单的3D应用中,有时候并不需要真实光影的3D场景.毕竟使用3D引擎会消耗很多资源,有时候使用各种变换和假的阴影贴图也能设计出既省资源,又有很好用户体验的“伪”3D界面. 在Silverlight中,因为性能问题,一般并不使用真3D引擎,微软为Silverlight提供了System.Windows.Media.PlaneProjection 类,用投影变换来模拟3D的效果. 下面让我们看

Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas绘制折线图.先看看绘制的效果: 代码: public class MyView extends View { //坐标轴原点的位置 private int xPoint=60; private int yPoint=260; //刻度长度 private int xScale=8;  //8个单位构

js实现楼层效果

今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>楼层切换</title> <style> *{padding: 0;margin: 0;} li{list-style: none;} .main img{width: 85

Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客

Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼

点击弹出动态菜单效果ios源码

这是一个点击弹出动态菜单效果,源码SphereMenuSwift,SphereMenuSwift使用 UIDynamicAnimator做的动态菜单.点击按钮弹出菜单.菜单可以拖拽.模拟碰撞物理效果,这是用Swift写的项目.效果图: <ignore_js_op> 使用方法: 代码的实现: override func viewDidAppear(animated: Bool) {         super.viewDidAppear(animated)         self.view.b