基于Vue實現(xiàn)鼠標滾動輪控制頁面橫向滑動效果
更新時間：2024年09月20日 10:33:45 作者：F2E_keze
這篇文章主要介紹了如何基于Vue實現(xiàn)鼠標滾動輪控制頁面橫向滑動效果,文中通過代碼示例和圖文結合的方式給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
1.首先創(chuàng)建一個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再滑動滾輪)
2.利用盒子縱向滾動條默認不需要shift鍵
綠色盒子就是v-scroll,v-scroll網(wǎng)上轉90之前，需要將內(nèi)容(照片盒子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>效果：(現(xiàn)在不需要按住shift，可直接滑動滾輪實現(xiàn)頁面橫向滑動)
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實現(xiàn)鼠標滾動輪控制頁面橫向滑動效果的詳細內(nèi)容，更多關于Vue實現(xiàn)鼠頁面橫向滑動的資料請關注腳本之家其它相關文章！
相關文章
前端vue-cli項目中使用img圖片和background背景圖的幾種方法
這篇文章主要介紹了前端vue-cli項目中使用img圖片和background背景圖的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要給大家介紹了關于vue中跳轉界面的3種實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue2?利用echarts?單獨繪制省份,首先引入所需要的第三方模塊，通過示例代碼給大家介紹的非常詳細，文章末尾給大家補充介紹了vue2.x結合echarts2實現(xiàn)顯示具體省份熱力圖的問題，需要的朋友可以參考下2022-01-01
postcss一種對css編譯的工具，類似babel對js的處理，postcss只是一個工具，本身不會對css一頓操作，它通過插件實現(xiàn)功能，autoprefixer就是其一2023-02-02
Vue3 獲取地址欄參數(shù)有兩個方式：查詢參數(shù)和路徑參數(shù)。Vue3獲取地址欄參數(shù)是從路由router中獲取，查詢參數(shù)和路徑參數(shù)獲取方式不一樣。感興趣的同學可以參考閱讀2023-04-04
vue使用GraphVis開發(fā)無限拓展的關系圖譜的實現(xiàn)
本文主要介紹了vue使用GraphVis開發(fā)無限拓展的關系圖譜，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
element-ui中el-cascader動態(tài)加載和默認值詳解
vue+elementUI項目中el-cascader級聯(lián)選擇器使用頻率非常高,下面這篇文章主要給大家介紹了關于element-ui中el-cascader動態(tài)加載和默認值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue3自定義Echars組件附帶全局配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue2.0中goods選購欄滾動算法的實現(xiàn)代碼
這篇文章主要介紹了vue2.0中goods選購欄滾動算法的實現(xiàn)代碼,需要的朋友可以參考下2017-05-05
這篇文章主要給大家介紹了vue獲取DOM節(jié)點的常用方法,使用ref屬性,使用$el屬性,使用querySelector和querySelectorAll,使用$refs和querySelector,這幾種方法,需要的朋友可以參考下2023-10-10