文章讲述了在前端开发中遇到的一个问题，即移动端组件在PC端无法通过滚轮事件操作。作者尝试了使用vant组件库、查看GitHubissues、优快云解答、引入hammerjs等多种方法，但未能直接解决问题。最终，作者选择了修改组件源码，通过监听滚轮事件并在Picker组件中模拟拖拽效果，实现了需求。此外，还介绍了如何使用混入（mixins）使解决方案全局生效，以及通过patch-package对vant组件包打补丁的简便方法。
背景
平常做前端开发的应该知道，在前端组件中，有两种组件
-
一种是针对移动端的组件
-
另一种是针对pc的组件
而pc的组件主要是对鼠标，键盘等操作的支持，而移动端组件常用的事件是触摸等事件
这时，狗血的就来了，业务总是能用各种奇怪的想法让你来回串着开发
我们有一款web是写在企业微信内部的h5网页，他使用的是移动端组件，但是这个应用由于企业微信手机端和电脑端都有，导致了业务也会用电脑操作的需求
这天，他说选项组件为什么不能使用滚轮选择？而是只能使用拖拽？这样不好用，要改成也支持滚轮
解决路径
嫌麻烦，请直接跳到最后的解决方案，前面只是解决路程
vant组件库
首先咱们就去看这个组件，也就是 vant官方库,他有一个能够兼容桌面的
这咱们一看就来劲儿了呀，正好咱们要用鼠标滚轮，肯定能够实现鼠标滚轮模拟拖拽呀，咱们继续往下看下去
然后发现本地项目中已经安了这个插件，但是滚轮效果仍然不生效，于是乎，这种方法不可以
gihtub issues
当然，如果咱们只会查文档解决问题那么咱们就不是合格的程序员了，咱们也要学会去源码项目的issues，于是咱们去看下vant项目源码
看到关于滚轮的有19个已解决，咱们就开心了，看来前人已经把路子探好了，咱们直接copy就行了
然后看到开发大大的回答就哭了，没计划支持，以后也不会支持，
优快云
csdn回答 这种方法也时候也能解决一些问题，但是他通过改node_modules解决的，这种方法涉及到如何把源码包抽离出来，进行更改，然后所有的引入源也更改，比较麻烦，而且害怕涉及到线上问题
hammerjs
再后来就想着使用hammerjs模拟手指操作可以么？滚轮滚一个，然后模拟手指滑动多少距离，这样就不用麻烦判断边界问题和选中问题，但是通过引入hammerjs问题频频。例如获取dom的麻烦等等问题，并且无法监听你是否能够监听你是否模拟成功了，所以这种也不行
换组件！！
换组件的话意味着重写，开发周期起码两天以上，这种特别麻烦
我尝试使用
- Mint UI
- Cube UI
- Vux
- MUI
等等，但是都没发现，突然我想看看antd-mobile，哭了，发现他有，但是他是react组件，vue和react串着写，肯定不可能呀
chatGPT(解决方案1)
改组件
其实上面换组件，和使用hammerjs都是他给我推荐的，可能是关键词不行？后来一个解决方法不用换组件，可以在原生写
原回答如下
-
在
mounted钩子函数中，获取到 Picker 组件的 DOM 元素，并添加wheel事件监听函数。 -
在
wheel事件监听函数中，根据鼠标滚轮滚动的方向来修改 Picker 组件的选中值。可以通过调用scrollToOption方法来实现滚动选中值的效果。
<template>
<div>
<van-picker
ref="picker"
:columns="columns"
@change="handleChange"
:default-index="currentIndex"
/>
</div>
</template>
<script>
// 如果不是v2记得把 :default-index="currentIndex"属性删掉，虽然我也不知道会出现什么错误
import { Picker } from 'vant';
export default {
components: {
[VanPicker.name]: Picker,
},
data() {
return {
columns: ['A', 'B', 'C', 'D', 'E'],
currentIndex: 0
};
},
mounted() {
//获取到picker的dom
//如果咱们在pouop里面写的话，就应该写到当弹窗出来再获取dom，否则获取不出来
const pickerEl = this.$refs.picker.$el;
pickerEl.addEventListener('wheel', this.handleWheel);
},
methods: {
handleChange(value, index) {
this.currentIndex = index;
console.log('Selected value(value, index)', value, index);
},
handleWheel(event) {
event.preventDefault();
//Math.sign()函数，返回+/-1，表示正数还是负数，例如deltaY发现是-100，那么Math.sign返回也是-1，但是传入0那就是0
const delta = Math.sign(event.deltaY);
//获取最大下标
const maxIndex = this.columns.length - 1;
//计算当前下标，因为滚轮和拖拽是相反的逻辑，我们可以试下，触控板和鼠标滚轮就是相反的，所以要减
const newIndex = this.currentIndex - delta;
//边界处理
if (newIndex >= 0 && newIndex <= maxIndex) {
this.currentIndex = newIndex;
//动画可能不流畅
//vant 4的话
this.$refs.picker.scrollToOption(newIndex);
//vant3 this.$refs.picker.scrollToOption(newIndex);
//vant2 的解决方案，我是以下的解决方法解决的
//这个是控制动画的时长
// this.$refs.picker.$el.getElementsByClassName('van-picker-column__wrapper')[0].style.transitionDuration='800ms'
//这个是给哪个变化添加属性，由于省事就添加all
//this.$refs.picker.$el.getElementsByClassName('van-picker-column__wrapper')[0].style.transitionProperty='all'
}
}
},
};
</script>
在这个示例中，我们在 mounted 钩子函数中获取到了 Picker 组件的 DOM 元素，并添加了 wheel 事件监听函数。在 handleWheel 方法中，我们根据鼠标滚轮滚动的方向来修改 Picker 组件的选中值，并调用 scrollToOption 方法来实现滚动选中值的效果。最后，我们在 handleChange 方法中输出了选中的值和索引。
需要注意的是，在 handleWheel 方法中，我们调用了 event.preventDefault() 来阻止浏览器默认的滚动行为，以避免与 Picker 组件的滚动效果冲突。
如何全局生效？
使用混入，以下是全部代码，我的vant是2版本
// mixins.js 文件
//1.picker组件需要添加ref
//2.骗
export const myMixin = {
methods: {
//这个事件放到picker弹出的地方
/***
* picker滚动事件
* @param picker picker的ref
* @param cloum picker的数据
* @param getCurFn 默认选中的index,是一个函数，因为需要拿到实时的
* @param setIndex 设置index的方法
* @returns {Promise<void>}
*/
async getpicker(picker,cloum,getCurFn,setIndex){
await new Promise(resolve => {setTimeout(resolve,100)})
const pickerEl = this.$refs[picker].$el;
pickerEl.addEventListener('wheel', (event)=>this.handleWheel(event,picker,cloum,getCurFn,setIndex));
// console.log("pickerEl",pickerEl)
},
handleWheel(event,picker,cloum,getCurFn,setIndex) {
// debugger
event.preventDefault();
const delta = Math.sign(event.deltaY);
// debugger
const maxIndex = cloum.length - 1;
const newIndex = getCurFn() + delta;
// debugger
this.$refs[picker].$el.getElementsByClassName('van-picker-column__wrapper')[0].style.transitionDuration='800ms'
this.$refs[picker].$el.getElementsByClassName('van-picker-column__wrapper')[0].style.transitionProperty='all'
if (newIndex >= 0 && newIndex <= maxIndex) {
// this.popupData.defaultIndex = newIndex;
// console.log(" setIndex", setIndex,newIndex)
setIndex(newIndex)
}
},
}
};
调用（需要再全部引用的地方都调用）
this.getpicker('picker',this.popupData.comSurList,()=>this.popupData.defaultIndex,(index)=>this.popupData.defaultIndex=index)
我们能够看到他的缺点了，需要再所有的地方都去调用一次
依赖包打补丁(最终解决，最简单)
更新vant到最新版本
更新vant之后，我们可以发现vant的picker组件已经支持滚动滑轮了，但是每个滑轮滑动的过大，可能一次跳过两个选项，我们要进行修改
改源码
改源码的方式有以下几种
-
提issues等待作者更新（莫不是在开玩笑）
-
将源码粘贴到component文件，然后全局改引用的位置（有一点点麻烦，项目也会变大，也有通过在webpack添加alis添加别名直接全局修改引用）
-
将源码仓库fork到自己的仓库，然后修改源码后，然后在自己项目中的npm修改一下包的位置后面的rep改成自己仓库的地址（但是记住千万别删这个仓库，否则以后你的项目就启不起来了）
-
通过patch-package对源码包打补丁
可以先了解一下patch-package 的介绍
说白了就三步
- 装依赖
- 直接改源码
- 执行命令将改的源码变成diff文件
- packagejson添加钩子执行
安装一下patch package
npm i patch-package
yarn add patch-package postinstall-postinstall
改源码
目录 node_modules->vant->picker->PickerColumn.js
在node_modules中找到vant（注意不是@vant，那个可能是vant的一些补丁包）
可以看到他的以下结构
全局搜索一下wheel，找到onMouseWheel的方法，可以除以一个倍数，让其流畅
编译补丁
npx patch-package package-name
此时我们可以看到根目录已经添加了一个patches文件了，查看文件发现是我们修改的相关位置
添加钩子
默认会在packagejson中scripts添加一个钩子函数
"postinstall": "patch-package",
他的意思是安装依赖的时候立马支持patch-package打补丁
此时就可以测试一下，将node_modules删除后测试一下是否成功了
异常解决
pm WARN lifecycle xxx.xxx.com@0.1.0~postinstall: cannot run in wd xxx.xxx.com@0.1.0 patch-package (wd=/node)
我们部署线上的时候可能会出问题，因为有的docker安装依赖的时候工作目录可能不一致，可以尝试将钩子函数添加一个打包前执行,此时就会正常执行了
"prebuild": "patch-package",
由于项目可能需要有不同环境的打包命令，所以可以以下
//开发环境需要
"postinstall": "patch-package",
//打包需要
"prebuild": "patch-package",
"prebuild:test": "patch-package",
"prebuild:feature1": "patch-package",
"prebuild:feature2": "patch-package",
"prebuild:prod": "patch-package"
于此，这项目就可以告别一段落
扫一扫
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
