ljc-x-wheel

light-joint-case 轻量的联合的方案，缩写也是俺的名儿，以后会将想要封装的东西放到这个 “ light-joint-case ” 系列里

兼容Vue2、3，一个把图层设置支持滚轮左右滚动的VUE指令

install

npm i ljc-x-wheel

或

yarn add ljc-x-wheel

Usage

// vue2
import Vue from 'vue'
import xWheel from 'ljc-x-wheel';

Vue.use(xWheel());

// vue3
import { createApp } from 'vue'
import App from './App.vue'
import xWheel from 'ljc-x-wheel';

const app = createApp(App);
app.use(xWheel());

自定义名称

指令默认 v-x-wheel

// 自定义指令名
app.use(xWheel('x-wheel-2')); // use v-x-wheel-2

参数

v-x-wheel 的参数是滚动幅度，值越大响应的滚动幅度越大

Example

<div class="wheel-wrap" v-x-wheel="0.1">
  <div class="wheel-item" v-for="i in 19" :key="i">{{ i }}</div>
</div>

.wheel-wrap {
  width: 600px;
  white-space: nowrap;
  overflow: auto;
}

.wheel-item {
  display: inline-block;
  padding: 20px 30px;
  margin: 5px;
  background: #999;
}

Preview

预览效果 我的主页 => X轴滚轮