脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue实现页面横向滑动

基于Vue实现鼠标滚动轮控制页面横向滑动效果

 更新时间：2024年09月20日 10:33:45   作者：F2E_keze  
这篇文章主要介绍了如何基于Vue实现鼠标滚动轮控制页面横向滑动效果,文中通过代码示例和图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

1.首先创建一个xScroll.vue组件

<template>
  <div class="main" v-size-ob="mainSize">
    <div class="v-scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
 
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
}
</style>

在页面中使用

<div class="zlcXScroll">
      <xScroll>
        <div class="imgs">
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
          <div>
            <img src="https://picsum.photos/200/300" alt="" />
          </div>
        </div>
      </xScroll>
    </div>

效果：

将容器内的内容横向排列

.zlcXScroll {
    width: 100%;
    height: 300px;
    .imgs {
      display: flex;
      flex-direction: row;
      align-items: center;
      img {
        margin-right: 10px;
      }
    }
  }

效果：(目前需要按住shift再滑动滚轮)

2.利用盒子纵向滚动条默认不需要shift键

绿色盒子就是v-scroll,v-scroll网上转90之前，需要将内容(照片盒子content)向下旋转90°

3.获取红色盒子的宽高，赋值给绿色盒子的高宽

<template>
  <div class="main" v-size-ob="mainSize">
    <div class="v-scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
let mainMes = reactive({
  w: 0,
  h: 0,
});
interface Eobj {
  width: number;
  height: number;
}
let mainSize = (e: Eobj) => {
  let { width, height } = e;
  mainMes.w = width;
  mainMes.h = height;
};
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
  outline: 1px solid red;
  .v-scroll {
    outline: 1px solid rgb(17, 0, 255);
    --w: calc(v-bind(mainMes.w) * 1px);
    --h: calc(v-bind(mainMes.h) * 1px);
    width: var(--h);
    height: var(--w);
    .content{
       height: var(--h);
    }
  }
}
</style>

4.将content盒子向下旋转90°

按照左上角为中心，直接旋转，会跑到最大容器外面去，可以往右移一点距离(红色容器的高度)，然后再旋转

<template>
  <div class="main" v-size-ob="mainSize">
    <div class="v-scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
let mainMes = reactive({
  w: 0,
  h: 0,
});
interface Eobj {
  width: number;
  height: number;
}
let mainSize = (e: Eobj) => {
  let { width, height } = e;
  mainMes.w = width;
  mainMes.h = height;
};
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
  outline: 1px solid red;
  .v-scroll {
    outline: 1px solid rgb(17, 0, 255);
    --w: calc(v-bind(mainMes.w) * 1px);
    --h: calc(v-bind(mainMes.h) * 1px);
    width: var(--h);
    height: var(--w);
    position: relative;
    .content {
      height: var(--h);
      position: absolute;
      left: var(--h);
      transform-origin: left top;
      transform: rotate(90deg);
    }
  }
}
</style>

效果：

5.content旋转完后，再将v-scroll向上旋转90°即可

<template>
  <div class="main" v-size-ob="mainSize">
    <div class="v-scroll">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
let mainMes = reactive({
  w: 0,
  h: 0,
});
interface Eobj {
  width: number;
  height: number;
}
let mainSize = (e: Eobj) => {
  let { width, height } = e;
  mainMes.w = width;
  mainMes.h = height;
};
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
  outline: 1px solid red;
  .v-scroll {
    outline: 1px solid rgb(17, 0, 255);
    --w: calc(v-bind(mainMes.w) * 1px);
    --h: calc(v-bind(mainMes.h) * 1px);
    width: var(--h);
    height: var(--w);
    position: relative;
    overflow: hidden scroll;
    transform-origin: 0 0;
    transform: translateY(var(--h)) rotate(-90deg);
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .content {
      height: var(--h);
      position: absolute;
      left: var(--h);
      transform-origin: left top;
      transform: rotate(90deg);
    }
  }
}
</style>

效果：(现在不需要按住shift，可直接滑动滚轮实现页面横向滑动)

6.v-size-ob是自定义指令：（获取元素的宽高）

新建一个sizeOb.ts文件

const map = new WeakMap();
const ob = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const handler = map.get(entry.target);
    if (handler) {
      const box = entry.borderBoxSize[0];
      handler({
        width: box.inlineSize,
        height: box.blockSize,
      });
    }
  }
});
 
export default {
  mounted(el, binding) {
    ob.observe(el);
    map.set(el, binding.value);
  },
  unmounted(el) {
    ob.unobserve(el);
  },
};

在main.ts入口文件中引入

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";
import sizeOb from "./directives/sizeOb";
 
let app = createApp(App);
app.config.globalProperties.msg = "hello";
 
//自定义指令
app.directive("size-ob", sizeOb);
 
app.use(Antd).mount("#app");

以上就是基于Vue实现鼠标滚动轮控制页面横向滑动效果的详细内容，更多关于Vue实现鼠页面横向滑动的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • el-form-renderer使用教程

    el-form-renderer使用教程

    本文主要介绍了el-form-renderer使用教程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 浅谈super-vuex使用体验

    浅谈super-vuex使用体验

    super-vuex是一套用于简化Vuex的数据架构。这篇文章主要介绍了浅谈super-vuex使用体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue3 ref获取不到子组件的解决方法

    vue3 ref获取不到子组件的解决方法

    在父组件内调用子组件内的事件从而改变子组件的某些状态,父子组件使用<script setup>语法糖,父组件通过给子组件定义ref访问其内部事件,本文给大家介绍了vue3 ref获取不到子组件的解决方法,需要的朋友可以参考下
    2024-06-06
  • vue 使用addRoutes动态添加路由及刷新页面跳转404路由的问题解决方案

    vue 使用addRoutes动态添加路由及刷新页面跳转404路由的问题解决方案

    我自己使用addRoutes动态添加的路由页面,使用router-link标签可以跳转,但是一刷新就会自动跳转到我定义的通配符 * 指向的404路由页面,这说明没有找到指定路由才跳到404路由的,这样的情况如何处理呢,下面小编给大家分享解决方案,一起看看吧
    2023-10-10
  • vue3.0关闭eslint校验的3种方法详解

    vue3.0关闭eslint校验的3种方法详解

    这篇文章主要给大家介绍了关于vue3.0关闭eslint校验的3种方法,在实际开发过程中,eslint的作用不可估量,文中将关闭的方法介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 基于Vue组件化的日期联动选择器功能的实现代码

    基于Vue组件化的日期联动选择器功能的实现代码

    这篇文章主要介绍了基于Vue组件化的日期联动选择器的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue中使用canvas方法总结

    Vue中使用canvas方法总结

    在本篇内容中小编给大家分享了关于Vue中使用canvas方法和步骤，对此有需要的读者们参考学习下。
    2019-02-02
  • 讲解vue-router之什么是嵌套路由

    讲解vue-router之什么是嵌套路由

    这篇文章主要介绍了讲解vue-router之什么是嵌套路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue3使用Element Plus实现列表界面的方法步骤

    Vue3使用Element Plus实现列表界面的方法步骤

    写后台管理的时候会有很多列表以及相应的条件查询,下面这篇文章主要给大家介绍了关于Vue3使用Element Plus实现列表界面的方法步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Vue.js处理API请求失败的最佳实践和策略

    Vue.js处理API请求失败的最佳实践和策略

    在现代Web开发中,与后端API的交互是不可避免的,然而,网络请求是不稳定的,可能会因为各种原因失败,因此,优雅地处理API请求失败的情况是提升用户体验和应用稳定性的关键,本文将详细介绍在Vue.js中处理API请求失败的最佳实践和策略,需要的朋友可以参考下
    2024-12-12

最新评论