vue点击盒子一步一步滚动

原创 已于 2023-07-06 14:53:11 修改 · 670 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2023-07-03 10:55:00 首次发布
该文章展示了一个使用Vue.js编写的组件，当用户点击箭头时，页面中的内容盒子会按照预设的样式进行滚动。内容包括顶部、中间和底部的块，每个块内有多个事件介绍。CSS样式用于定义箭头和内容框的外观，而Vue的方法（next和step）处理点击事件，更新索引并执行滚动动画。

vue点击盒子一步一步滚动

在这里插入图片描述

HTML

        <div class="course_detail">
          <div class="arrow" v-if="index == 0" @click="step"></div>
          <div class="lightArrow" v-else @click="step"></div>
          <div class="courseBox">
            <div class="newBox" ref="courseBox">
              <div class="top">
                <div class="topOut">
                  <div>
                    <h3>首次事件</h3>
                    <p>首次实现直升机上舰</p>
                  </div>
                  <div>1986年</div>
                </div>
                <div class="topOut">
                  <div>
                    <h3>首次事件</h3>
                    <p>首次实现直升机上舰</p>
                  </div>
                  <div>1986年</div>
                </div>
                <div class="topOut">
                  <div>
                    <h3>首次事件</h3>
                    <p>首次实现直升机上舰</p>
                  </div>
                  <div>1986年</div>
                </div>
                <div class="topOut">
                  <div>
                    <h3>首次事件</h3>
                    <p>首次实现直升机上舰</p>
                  </div>
                  <div>1986年</div>
                </div>
                <div class="topOut">
                  <div>
                    <h3>首次事件</h3>
                    <p>首次实现直升机上舰</p>
                  </div>
                  <div>1986年</div>
                </div>
              </div>
              <div class="middle">
                <p class="el-icon-arrow-right"></p>
                <p class="el-icon-arrow-right"></p>
                <p class="el-icon-arrow-right"></p>
                <p class="el-icon-arrow-right"></p>
                <p class="el-icon-arrow-right"></p>
                <p class="el-icon-arrow-right"></p>
                <p class="el-icon-arrow-right"></p>
                <p class="el-icon-arrow-right"></p>
                <p class="el-icon-arrow-right"></p>
              </div>
              <div class="bottom">
                <div class="topOut">
                  <div>
                    <h3>首次事件</h3>
                    <p>首次实现直升机上舰</p>
                  </div>
                  <div>1986年</div>
                </div>
                <div class="topOut">
                  <div>
                    <h3>首次事件</h3>
                    <p>首次实现直升机上舰</p>
                  </div>
                  <div>1986年</div>
                </div>
                <div class="topOut">
                  <div>
                    <h3>首次事件</h3>
                    <p>首次实现直升机上舰</p>
                  </div>
                  <div>1986年</div>
                </div>
                <div class="topOut">
                  <div>
                    <h3>首次事件</h3>
                    <p>首次实现直升机上舰</p>
                  </div>
                  <div>1986年</div>
                </div>
              </div>
            </div>
          </div>
          <div class="arrow" v-if="index == 4" @click="next"></div>
          <div class="lightArrow" v-else @click="next"></div>
        </div>

样式

.course_detail {
  width: 100%;
  height: 422px;
  display: flex;
  align-items: center;
  .lightArrow{
        width: 40px;
    height: 40px;
          background: url("../assets/images/向右箭头-2.png");
              &:first-child {
      transform: rotate(180deg);
    }
  }
  .arrow {
    width: 40px;
    height: 40px;
    background: url("../assets/images/向右箭头-1.png");
    &:first-child {
      transform: rotate(180deg);
    }
    // &:hover {
    //   background: url("../assets/images/向右箭头-2.png") !important;
    // }
  }
  .courseBox {
    position: relative;
    flex: 1;
    height: 100%;
    margin: 0 10px;
    overflow: hidden;
    .newBox{
    position: relative;
    flex: 1;
    height: 100%;
    width: 3000px;
    margin: 0 10px;
    .top {
      box-sizing: border-box;
      // padding: 0 15px;
      padding: 0 6px;
      display: flex;
      width: 100%;
      height: 50%;
      border-bottom: 1px dashed #ced3d9;
      .topOut {
        position: relative;
        display: flex;
        align-items: center;
        // width: 33.3%;
        // width: 375px;
        width: 400px;
        height: 100%;
        div {
          width: 50%;
          height: 100%;
          border-radius: 15px 15px 0 0;
          &:first-child {
            box-shadow: 7px 7px 12px rgb(0, 63, 133,.2),-1px -1px 12px rgb(0, 63, 133,.2);
            // background: url("../assets/images/荣誉-1.png");
            background: url("../assets/images/荣誉-1.png") center center;
            h3 {
              text-align: right;
              margin-top: 44px;
              font-size: 22px;
              color: #003f85;
              font-family: Bold;
              width: 60%;
            }
            p {
              text-align: right;
              width: 60%;
              font-size: 16px;
              color: #1b3646;
              font-family: Normal;
              padding-left: 20px;
            }
          }
          &:last-child {
            position: absolute;
            top: 39%;
            left: 47%;
            width: 96px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            background: url("../assets/images/半圆框.png") center center;
            font-size: 18px;
            color: #003f85;
            font-family: Year;
            z-index: 1;
          }
        }
      }
    }
    .middle {
      display: flex;
      width: 100%;
      position: absolute;
      top: 201px;
      p {
        width: 17px;
        height: 17px;
        line-height: 17px;
        font-weight: 600;
        text-align: center;
        margin-left: 182px;
        border: 2px solid #053d7d;
        border-radius: 50%;
        font-size: 12px;
        color: #053d7d;
        z-index: 2;
        &:first-child {
          margin-left: 90px;
        }
      }
    }
    .bottom {
      display: flex;
      width: 100%;
      margin: 0 auto;
      height: 50%;
      .topOut {
                  position: relative;
        display: flex;
        align-items: center;
        // width: 375px;
        width: 400px;
        height: 100%;
        &:first-child{
          margin-left: 215px;
        }
        div {
          width: 50%;
          height: 100%;
          border-radius: 0 0 15px 15px;
          &:first-child {
            box-shadow: -1px -1px 8px rgb(0, 63, 133,.2),7px 7px 15px rgb(0, 63, 133,.2);
            background: url("../assets/images/首次事件-2.png") center center;
            h3 {
              text-align: right;
              margin-top: 44px;
              font-size: 22px;
              color: #003f85;
              font-family: Bold;
              width: 60%;
            }
            p {
              text-align: right;
              width: 60%;
              font-size: 16px;
              color: #1b3646;
              font-family: Normal;
              padding-left: 20px;
            }
          }
          &:last-child {
            position: absolute;
            top: 39%;
            left:48%;
            width: 96px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            background: url("../assets/images/半圆框.png") no-repeat;
            background-size: contain;
            font-size: 18px;
            color: #003f85;
            font-family: Year;
            z-index: 1;
          }
        }
      }
    }
    }

  }
}

data

index:0,
paddingLeft:25,
itemWidth:200,
distance:0,

方法

    next() {
      if (this.index >= 4) {
        return;
      }
      this.index++;
      console.log(this.index,'index');
      this.moveBox();
    },
    step(){
      if(this.index <= 0) {
        return;
      }
      this.index--;
      this.moveBox();
    },
    moveBox() {
      if(this.index == 0) {
        this.distance = 0;
      }  else {
        this.distance = -(this.paddingLeft + this.index * this.itemWidth);
      }
      let dot = this.$refs.courseBox;
      console.log(dot, 'dot');
      dot.style.transform = `translate(${this.distance}px,0)`;
    }
程序员：项目中的“滚动盒子”竟然还可以这样写
flying meng的菜鸟居
02-02 1627
讲真，项目中的“滚动元素”问题还是挺重要的。。。这里笔者讲过实践总结了一些方法： 第一种方式：根据不同屏幕动态获取滚动盒子高度 其实“想让一个页面部分内容（某个div）发生滚动，只要让内容高度大于盒子高度即可”。 基于此，包裹滚动内容的div的高度就不能是自适应内容的高度，而是通过js获取的相对每个页面的“固定高度...
Vue自定义横向轮播图
qq_54855933的博客
08-19 2352
实现了一个自定义横向轮播图，并提供了效果演示
在vue中实现横向滑动盒子以及点击滑动盒子
彭于晏的博客
11-09 1343
在我们平时的项目需求中可能会遇到这样的需求，就是多个数据，同时只能展示出3个，这时候就该用上我们的滑动了，先设置css样式。因为一次性改变它的scrollLeft 会给我们一种卡顿的现象，所以在移动的时候我加了一些处理，这样看起来更平滑，更顺畅。/* 超出滚动的关键，没有它元素会自动缩小，不会滚动 */下面是子盒子,子盒子的数量一定要大于3个，flex-shrink很关键。以上便能够实现盒子内的滑动了，如果想多加上一些功能的话，看下面。
vue页面实现盒子内滚动加载分页数据
学习从今天开始
02-24 439
vue实现盒子内滚动加载分页
vue 盒子水平滚动 （滚轮事件+轮播）
weixin_49692963的博客
07-21 709
vue 盒子水平滚动 和 滚轮操作
vue拖拽盒子；vue移动
ll_883963的博客
08-22 1142
s
基于vue实现移动端点击上方导航，内容滑动切换，滑动内容导航自动切换。
吃大白菜的熊的博客
05-13 7892
这是在日常开发过程中常见的选项卡(带滑动切换效果),小白一枚，不足之处还望体谅，包涵，这也是第一次尝试写博客，以后会继续分享一些工作中的问题与收获。 实现效果： 点击上方导航，当前导航添加样式，下方内容滑动切换，滑动下方内容上面导航切换。 第一步：静态布局 html： <div id="lao" class="warp"> <!--导航--&gt...
vue3-scroll-seamless 怎么让滚动的数据有滚动条
最新发布
01-07
### 如何在 `vue3-scroll-seamless` 中添加滚动条并显示滚动数据 为了实现 `vue3-scroll-seamless` 插件中的滚动数据显示功能，可以按照以下方法配置组件属性和样式来确保滚动效果正常工作。 #### 配置组件属性 ...
vue面试题2023
admin12345671的博客
04-12 1004
一、1.Vue的生命周期方法有哪些？- beforeCreate 初始化实例前（在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。）- created 实例创建完成之后被调用- beforeMount 挂载开始之前被调用（相关的 render 函数首次被调用）- mounted 挂载之后 （在当前阶段真实的DOM挂载完毕，数据完成双向绑定，可以访问DOM节点）- beforeUpdate 数据更新前调用 （不会触发重新渲染过程）- updated 更新完成
黑马头条案例（基于vue2）
qq_53767416的博客
12-07 3321
html、前端，基于vue2，黑马头条案例内容展示
【CSS技巧系列】解决子容器滚动引发父容器滚动问题
程麒阁的博客
08-31 2781
有些时候子容器和父容器都有滚动，子容器滚动到尽头的时候父容器会触发滚动，更有甚者有可能会触发谷歌浏览器的双指回退，那么你知道该怎么解决嘛？
js 移动元素至父盒子边界外，父滚动条自动跟随移动元素
LeakGas的博客
03-27 777
效果如下 创建scrollmove.js，内容如下 //获取原生dom对象 export function getDom(name) { return document.querySelector(name) } //移动元素 // mouseDrag(e,()=>{},()=>{}) //mousedown事件e,move方法，up方法 export function mouseDrag(d, move, up) { let dx = d.clientX, d.
CSS：实现动态旋转效果/椭圆渐变圆环旋转/椭圆轨迹旋转
smm的博客
05-07 5898
CSS：实现动态旋转效果
vue+h5实现弧形科技感可触控轮播
qq_41852789的博客
12-05 3147
实现效果：星球触控弧形切换 github地址
Vue-封装简易的长列表虚拟滚动组件(含触底加载数据)
weixin_45313351的博客
03-01 2968
封装简易的长列表虚拟滚动组件(含触底加载数据)
jQuery和JavaScript和vue让子盒子滚动到父盒子的指定位置，包括设置scrollTop到指定位置的值为rem
weixin_44784401的博客
03-07 3967
jQuery和JavaScript和vue让子盒子滚动到父盒子的指定位置，包括设置scrollTop到指定位置的值为rem
前端 圆形进度图_详解用CSS3制作圆形滚动进度条动画效果
weixin_39837207的博客
12-19 743
主 题今天手把手教大家用CSS3制作圆形滚动进度条动画，想不会都难！那么，到底是什么东东呢？先不急，之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》，但是呢，那篇博客只是制作出来效果而已，并没有动画效果，因为当时正期末复习期间，所以就省了制作动画的时间成本。所以，今天就一起把各种效果都实现吧！内 容先看一下效果图，会提升我们的学习兴趣哟：好的，我将按照此图从上到下的顺...
Vue3 滚动盒子组件,scroll,overflow-y:scroll
weixin_43029943的博客
05-25 1528
Vue3 滚动盒子组件,scroll,overflow-y:scroll
监听盒子滚动条位置（原生、Vue2、Vue3）
weixin_62992614的博客
07-22 4154
首先，确保你已经在项目中引入了Vue 3，并创建了一个Vue实例。要在Vue 2中使用并获取盒子的滚动条位置，你可以使用Vue的指令和实例属性。首先，确保你已经在项目中引入了Vue，并创建了一个Vue实例。请注意，要获取滚动条位置，盒子元素必须存在滚动条，并且已经发生了滚动。在Vue 3中，你可以使用Vue Composition API和。要获取盒子（元素）的滚动条位置，可以使用JavaScript的。就会在盒子发生滚动时自动更新，并保持与滚动条位置的同步。在上述示例中，我们在Vue实例中定义了。
Vue 实现左右侧联动滚动详细教程
"Vue 左右侧联动滚动的实现主要依赖于 Vue.js 框架以及第三方滚动库 better-scroll.js。这种技术常用于导航菜单与内容区域的同步滚动，提升用户体验。" 在 Vue 中实现左右侧联动滚动的关键在于监听和响应用户的滚动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值