欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁面橫向滑動(dòng)效果

 更新時(shí)間：2024年09月20日 10:33:45   作者：F2E_keze  
這篇文章主要介紹了如何基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁面橫向滑動(dòng)效果,文中通過代碼示例和圖文結(jié)合的方式給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

1.首先創(chuàng)建一個(gè)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>

效果：

將容器內(nèi)的內(nèi)容橫向排列

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

效果：(目前需要按住shift再滑動(dòng)滾輪)

2.利用盒子縱向滾動(dòng)條默認(rèn)不需要shift鍵

綠色盒子就是v-scroll,v-scroll網(wǎng)上轉(zhuǎn)90之前，需要將內(nèi)容(照片盒子content)向下旋轉(zhuǎn)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盒子向下旋轉(zhuǎn)90°

按照左上角為中心，直接旋轉(zhuǎn)，會(huì)跑到最大容器外面去，可以往右移一點(diǎn)距離(紅色容器的高度)，然后再旋轉(zhuǎn)

<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旋轉(zhuǎn)完后，再將v-scroll向上旋轉(zhuǎn)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>

效果：(現(xiàn)在不需要按住shift，可直接滑動(dòng)滾輪實(shí)現(xiàn)頁面橫向滑動(dòng))

6.v-size-ob是自定義指令：（獲取元素的寬高）

新建一個(gè)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實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁面橫向滑動(dòng)效果的詳細(xì)內(nèi)容，更多關(guān)于Vue實(shí)現(xiàn)鼠頁面橫向滑動(dòng)的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • el-form-renderer使用教程

    el-form-renderer使用教程

    本文主要介紹了el-form-renderer使用教程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • 淺談super-vuex使用體驗(yàn)

    淺談super-vuex使用體驗(yàn)

    super-vuex是一套用于簡化Vuex的數(shù)據(jù)架構(gòu)。這篇文章主要介紹了淺談super-vuex使用體驗(yàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • vue3 ref獲取不到子組件的解決方法

    vue3 ref獲取不到子組件的解決方法

    在父組件內(nèi)調(diào)用子組件內(nèi)的事件從而改變子組件的某些狀態(tài),父子組件使用<script setup>語法糖,父組件通過給子組件定義ref訪問其內(nèi)部事件,本文給大家介紹了vue3 ref獲取不到子組件的解決方法,需要的朋友可以參考下
    2024-06-06
  • vue?使用addRoutes動(dòng)態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案

    vue?使用addRoutes動(dòng)態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案

    我自己使用addRoutes動(dòng)態(tài)添加的路由頁面,使用router-link標(biāo)簽可以跳轉(zhuǎn),但是一刷新就會(huì)自動(dòng)跳轉(zhuǎn)到我定義的通配符?*?指向的404路由頁面,這說明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧
    2023-10-10
  • vue3.0關(guān)閉eslint校驗(yàn)的3種方法詳解

    vue3.0關(guān)閉eslint校驗(yàn)的3種方法詳解

    這篇文章主要給大家介紹了關(guān)于vue3.0關(guān)閉eslint校驗(yàn)的3種方法,在實(shí)際開發(fā)過程中,eslint的作用不可估量,文中將關(guān)閉的方法介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • 基于Vue組件化的日期聯(lián)動(dòng)選擇器功能的實(shí)現(xiàn)代碼

    基于Vue組件化的日期聯(lián)動(dòng)選擇器功能的實(shí)現(xiàn)代碼

    這篇文章主要介紹了基于Vue組件化的日期聯(lián)動(dòng)選擇器的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-11
  • Vue中使用canvas方法總結(jié)

    Vue中使用canvas方法總結(jié)

    在本篇內(nèi)容中小編給大家分享了關(guān)于Vue中使用canvas方法和步驟，對(duì)此有需要的讀者們參考學(xué)習(xí)下。
    2019-02-02
  • 講解vue-router之什么是嵌套路由

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

    這篇文章主要介紹了講解vue-router之什么是嵌套路由，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05
  • Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟

    Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟

    寫后臺(tái)管理的時(shí)候會(huì)有很多列表以及相應(yīng)的條件查詢,下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-04-04
  • Vue.js處理API請求失敗的最佳實(shí)踐和策略

    Vue.js處理API請求失敗的最佳實(shí)踐和策略

    在現(xiàn)代Web開發(fā)中,與后端API的交互是不可避免的,然而,網(wǎng)絡(luò)請求是不穩(wěn)定的,可能會(huì)因?yàn)楦鞣N原因失敗,因此,優(yōu)雅地處理API請求失敗的情況是提升用戶體驗(yàn)和應(yīng)用穩(wěn)定性的關(guān)鍵,本文將詳細(xì)介紹在Vue.js中處理API請求失敗的最佳實(shí)踐和策略,需要的朋友可以參考下
    2024-12-12

最新評(píng)論