vue实现鼠标滚轮控制页面横向滑动
先看效果
20240919_095531
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");